vue--cli搭建项目的步骤跟常用到的依赖安装说明与使用

vue–cli搭建项目的步骤跟常用到的依赖安装说明与使用

一、vue安装步骤如下

1、安装 node.js，下载路径：http://nodejs.cn/
安装完成后，输入 node -v 和 npm -v来检查是否安装成功，显示出版本号，说明成功；如图所示：

2、安装 vue-cli
（1）全局安装 vue-cli：npm install -g vue-cli
或者这样安装cli：npm install -g cnpm –registry=https://registry.npm.taobao.org
如果安装失败，用 npm cache clean 清理缓存，然后再重新安装。
cnpm -v 查看是否安装成功，成功则如图：
（2）cnpm 安装 vue-cli 和 webpack：cnpm install -g vue-cli
使用 vue -V （大写V）查看是否安装成功。
（3）生成项目：vue init webpack Vue-Project
webpack ：模板名称， GitHub 有更多的模板：https://github.com/vuejs-templates
Vue-Project ：自定义的项目名称

（4）进入项目目录：cd Vue-Project
（5）使用 cnpm 安装依赖：cnpm install
常用到的插件：
（6）图片懒加载

• 安装：cnpm install vue-lazyload –save-dev
• 配置： main.js引入插件
  import VueLazyLoad from ‘vue-lazyload’
  Vue.use(VueLazyLoad,{
  error:’./static/error.png’,
  loading:’./static/loading.png’
  })
• vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy
  （7）安装less和less-loader : 命令：cnpm install less less-loader –save
• 配置less: 路径：build—webpack.base.conf.js添加
• {
  test: /.less$/,
  loader: ‘style-loader!css-loader!less-loader’
  }

（8）安装sass ：cnpm install sass-loader –save
（9）vuex安装：cnpm install vuex –save
（10）vue-cli脚手架之二维码的生成（vue-qriously）
1. 安装：npm install vue-qriously –save-dev
2. main.js 入口文件需要配置
（11）安装node服务器中的express插件
1. 配置环境：cnpm install 安装express让express
2. 全局使用：npm install -g express-generator

（n）然后启动项目：npm run dev
（nn）打包上线:npm run build
注意：
1、安装是如果没有取消eslint语法约束的话，可以在生成的项目中取消，如：在build/webpack.base.conf.js文件中，注释或者删除掉：module->rules中有关eslint的规则：如下


2、在浏览器运行不可一时，可能是本地的 8080 端口被占用，需要修改一下配置文件 config>index.js