Vue项目初始化

About

当我们最初创建一个Vue项目后，我们会根据项目需要以及个人的一些习惯安装一些依赖包或者插件，这篇文章主要写的是我最近写的一个移动端网页的项目创建的过程。

一、创建项目

1. 先在github等代码托管网站上建立一个仓库
2. 将仓库克隆到本地

git clone git@github.com:gitBingxu/travel.git

3. 使用vue-cli脚手架初始化项目

vue-cli init webpack project-name

4. 完成上述操作后，可以试着跑一下项目，看是否初始化成功

cd project-name
npm run start

如果上述操作都完成了，那么我们的项目也就创建成功了

二、引入第三方包

1. 配置meta标签，在index.htm的meta中添加如下内容，这样可以禁止用户缩放页面

content="width=device-width,initial-scale=1.0,
minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"

2. 引入reset.css，解决在不同设备上的兼容性问题。
3. 引入border.css，解决在二倍屏或者三倍屏中1px边框显示不正常问题。

这两个css文件可以从我的github仓库中获取
https://github.com/gitBingxu/travel/tree/master/src/assets/styles

4. 安装fastclick解决移动端设备300ms点击延迟的问题

1. npm install fastclick --save
2. fastClick.attach(document.body) // 在main.js添加这行代码

5. 还可以根据自己的喜好添加一些其他的包比如 vue-awesome-swiper、velocity.js 等一些其他的插件。

三、配置VsCode模板

参照我的另一篇博客： https://www.jianshu.com/p/44a7022a301b

结尾

通过上述操作，一个简单的项目也就创建成功了。