VUE-CLI脚手架的搭建（2.0 及 3.0）

vue-cli 2 VUE脚手架

vue-cli 3 VUE脚手架

1、安装node js

下载地址：http://nodejs.cn/download/

2、安装完成后运行Node.js command prompt（node -v查看安装版本）

3、安装npm（由于现在版本的nodejs已经集成npm所以无需安装，可以用npm -v 查看版本）

4、注册cnpm来代替npm

使用命令：npm install cnpm -g --registry=https://registry.npm.taobao.org

如果你发现你安装成功了，使用cnpm却发现找不到命令，那么就是你的环境变量有问题，在环境变量里面的path添加你node的安装路径就行，比如";C:\Program Files\nodejs\node_modules"

5、安装vue脚手架vue-cli

命令：cnpm install -g vue-cli

安装成功后可以用 vue -V 查看vue版本

6、cd到对应的目录下初始化vue项目

命令：vue init webpack my-project
　　　　　　Project name 项目名
　　　　　　Project description 项目名描述
　　　　　　Author 作者邮箱
　　　　　　Use ESLint to lint your code? 是否需要ESlist语法检查
　　　　　　Setup unit tests with Karma + Mocha? 是否需要单元测试
　　　　　　Setup e2e tests with Nightwatch? Yes是否需要e2e测试

7、package.json为项目依赖资源，如果要运行这个项目需要使用cnpm install 安装依赖项（直接在项目文件夹路径下执行）

8、使用命令cnpm run dev启动项目，浏览器会打开 http://localhost:8080/#/ 看到以下效果

注： 开发时属于热部署状态，代码保存后浏览器会自动刷新，错误提示也非常友好。

9、编译打包 cnpm run build

会编译打包到项目dist文件夹下，然后我们就可以部署到服务器上（注意：如果你直接打开index.html，可能页面会是一片空白，这是由于你引用的js路径有问题）

10、安装axios插件

cnpm install axios //生产环境
npm install --save axios vue-axios //测试环境
　　两者都下载：
　　在 main.js 中写入以下内容：

   import Vue from 'vue'
　　import axios from 'axios'
　　import VueAxios from 'vue-axios' 

　　Vue.use(VueAxios, axios)

在页面中的用法：

   Vue.axios.get(api).then((response) => {
  　　console.log(response.data)
　　})
　　this.axios.get(api).then((response) => {
  　　console.log(response.data)
　　}) 
　　this.$http.get(api).then((response) => {
  　　console.log(response.data)
　　})

或者在 main.js 中写入以下内容：

      import axios from 'axios'
　　　　Vue.prototype.$axios = axios

使用页面

   this.$axios.get(api).then((response) => {
  　　console.log(response.data)
　　})

11、安装jquery依赖

npm install jquery --save
　　
在 main.js 中写入以下内容：

import $ from 'jquery' 

12、脚手架目录介绍

vue-cli 3 VUE脚手架

注： vue cli3 需要node8.9或者以上版本

vue-cli版本检查

// 命令行
vue -V  // 查看当前版本
npm uninstall -g vue-cli  //卸载之前的
npm install -g @vue/cli   //安装最新的

开始构建项目

vue create ‘项目名’ 回车创建

配置

• default 是默认配置
• Manually select features 是自己手动选择
  （上下箭头切换，回车确定）
  
• babel:转换es6语法的这个必须要
• typescript 看自己需不需要用
• router管理路由的也选上
• vuex状态管理就看自己需不需要用
• css pre样式预处理器这个也加上
• linter/Formatter统一代码风格
• 最后2个分别是单元测试和端对端测试。 示例选择了几个常用的 然后回车确认
  

路由使用历史模式吗？

路由模式分为Hash模式 History(历史)模式 Abstract模式 三种
hash模式最明显的特点就是url上会带有#号， History历史模式的url就跟正常的访问地址一样。
示例不使用历史模式，所以选的n

选择css预处理器 我选的less

选择语法检测工具

• ESLint with error prevention only(只检测错误)
• ESLint + Standard config
  自带linter和自动代码纠正，没有配置，自动格式化代码，可在编码早起发现规范问题和低级错误
• ESLint + Prettier 能统团队的代码风格

示例选择 ESLint + Prettier

选择语法检查方式

• Lint on save (保存就检测)

• Lint and fex on commit ( 用户提交文件到git的时候检测 ) 示例选择 Lint on save
  
  babel,postcss,eslint配置文件存放位置

• in dedicated config files（在专用配置文件中，就是单独管理）

• in package.json（放在package.json里） 示例选择：in dedicated config files
  
  保存为未来项目的预配置
  
  安装成功
  npm run serve 启动项目