vue项目初始化

创建vue项目

1.安装vue

2.安装全局的vue-cli脚手架,用于帮助搭建所需的模板框架

vue-cli3.0之前

1. 命令行输入cnpm install -g vue-cli全局安装vue-cli，回车，等待安装。
2. 安装完后，可以输入vue，然后回车，如果出现vue的信息，则说明安装成功了。
3. 紧接着，就该创建项目了，自己找一个合适的地方，新建一个 项目文件夹，根据自己的需要命名。
4. 然后输入:vue init webpack my-vue(项目文件夹名)，回车，等待一小会儿，依次出现‘git’下的项，可按下图操作:
   最后根据提示进入项目文件夹，输入npm run dev

3.项目代码初始化

• 如果项目是移动端的项目，index.html加入meta标签

  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,initial-scale=1.0" />
  

• 在main.js入口文件内引入reset/border css文件进行样式初始化和解决移动端1px边框问题
• 在main.js入口文件内引入fastclick库，解决移动端点击延迟的问题
  在main.js中写入fastClick.attach(document.body)
  在npm中输入cnpm install fastclick --save命令对fastClick库进行安装将此安装包安装在我的项目的依赖之中
  –save表示不管在开发环境之中,或者是打包生成线上版本的代码都需要fastClick
• 如果使用iconfont，引入iconfont.css

4.项目开发中的细节

• 项目开始开发前安装所需依赖包
  npm install stylus stylus-loader --save
  然后输入npm run start重启项目了，项目中就可以用stylus了

• 使用vw进行移动端适配
  参考文章: 如何在Vue项目中使用vw实现移动端适配
  如果有报错Module build failed: Error: Cannot load preset “advanced”。在命令行输入cnpm install cssnano-preset-advanced --save

• 轮播图插件vue-awesome-swiper
  https://github.com/surmon-china/vue-awesome-swiper
  

  在main.js中引入
  模版