VUE-高级使用

脚手架环境配置

1.安装 node js 安装完成后 cmd 打开命令提示符窗口，输入： npm -v 检测是否安装成功，如果输出版本号，则表示安装成功。

2.配置 npm

npm（node package manager）：nodejs 的包管理器，用于 node 插件管理（包括安装、卸载、管理依赖等）因为 npm 安装插件是从国外服务器下载，受网络的影响比较大，可能会出现异常，所以我们乐于分享的淘宝团队干了这事。来自官网：这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10 分钟一次以保证尽量与官方服务同步。

npm config set registry https://registry.npm.taobao.org

验证命令 npm config get registry 如果返回 https://registry.npm.taobao.org，说明镜像配置成功。有时一些项目中相关依赖下载报错也可以安装 cnpm。使用时只需要将原来的 npm 换成 cnpm 命令即可。 安装 cnpm 命令如下：

npm install -g cnpm --registry=https://registry.npm.taobao.org

在一些大型前端项目中可能会报错说 python 没找到。只需要为 npm 或 cnpm 全局安装 windows-build-tools 即可。

npm install --global --production windows-build-tools

3.在 NPM 中全局安装 Vue.js 构建大型应用。

npm install vue --global

 4.全局安装 vue-cli

npm install --global vue-cli

5.创建一个基于 webpack 模板的新项目

vue init webpack my-project

 输入命令后，会跳出几个选项让你回答： 

Project name (baoge)： -----项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters），

Project description (A Vue.js project)： ----项目描述，也可直接点击回车，使用默认名字 

Author ()： ----作者，输入你的大名 接下来会让用户选择： 

Runtime + Compiler: recommended for most users 运行加编译，既然已经说了推荐，就选它了 

Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由，输入“y”回车或直接回车安装。 

Use ESLint to lint your code? (Y/n) 是否使用 ESLint 管理代码，ESLint 是个代码风格管理工具，是用来统一代码风格的，选择不安装。 

Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，选择不安装。

Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，选择不安装。 

Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ，选择不安装。

npm 安装依赖，选择使用自定义。

回答完毕后上图就开始构建项目了

6.启动并允许

cd my-project
npm install
npm run dev
DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

打开地址：http://localhost:8080/

 

将项目拖入 idea 进行开发，idea 需要安装 vue.js 插件，由于 vue 脚手架项目会大量更新 node_modules 下的文件，导致软件卡顿。使用如下配置可以让 idea 忽略检查该目录。

注意：Vue.js 不支持 IE8 及其以下 IE 版本。

扩展：ESLint

ESLint 是一个插件化并且可配置的 JavaScript语法规则和代码风格的检查工具。ESLint能够帮你轻松写出高质量的 JavaScript代码。如果安装 ESLint 后 package.json 中的 scripts 里面多了一条命令：

"lint": "eslint --ext .js,.vue src",

 同时 devDependencies 中多了如下依赖，在 devDependencies 中安装依赖命令为 npm install --save-dev 依赖包名

"babel-eslint": "^8.2.1",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",

项目中同时也会增加两个文件，一个存放忽略检查文件路径，一个是 eslint 的核心配置

.eslintignore
.eslintrc.js

最后在 build 下的 webpack.base.conf.js 中多了如下配置：

...
const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

module.exports = {
  ....,
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      ....
    ]
  },
....
}