第一章 vue-cli 搭建VUE项目

首先安装好node和npm，vscode

node：是一个基于 Chrome V8 引擎的 JavaScript 运行环境，和NPM一块儿管理包

NPM: 随同NodeJS一块儿安装的包管理工具，能解决NodeJS代码部署上的不少问题，常见的使用场景有如下几种：

1.容许用户从NPM服务器下载别人编写的第三方包到本地使用。
2.容许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
3.容许用户将本身编写的包或命令行程序上传到NPM服务器供别人使用。

vscode: 开发工具

1、 项目使用技术、框架简单介绍

咱们使用vue-cli来搭建整个项目，vue-cli就是一个脚手架，步骤很简单，输入几个命令以后就会生成整个项目，里面包括了webpack、ESLint、babel不少配置等等，省了不少事。

Vue主要框架

ESLint: 帮助咱们检查Javascript编程时的语法错误，这样在一个项目中多人开发，能达到一致的语法

Webpack: 设置代理、插件和loader处理各类文件和相关功能、打包等功能。整个项目中核心配置

iview: 是基于vue的一套样式框架，里面有不少封装好的组件样式

ES6: 紧跟时代潮流，使用ES6语法，利用babel处理。

搭建vue-cli命令：

1.打开cmd ,敲入命令：npm install --global vue-cli （–global：全局安装）

2.安装好以后打开C:UsersstaffAppDataRoamingnpmnode_modules 能够看到这个文件夹下已经有相关的脚本文件，如图：

二.建立项目
cmd打开本身的项目工做空间，而后敲入命令：

vue init webpack onePage（其中test为个人项目名称）

一步一步根据提示创建

“Project name”：这个是项目名称，默认是输入时的那个名称，想改的话直接输入修改，也能够直接回车

“Install vue-router”:是否须要vue-router，这里默认选择使用，这样生成好的项目就会有相关的路由配置文件

“Use ESLint to lint your code”:是否使用ESLint，刚才说了咱们这个项目须要使用因此也是直接回车，默认使用，这样会生成相关的ESLint配置

“Setup unit tests with Karma + Moch?”: 是否安装单元测试,若是如今尚未单元测试，选择的是”N”，而不是直接回车

“Setup e2e tests with Nightwatch”：是否安装e2e测试，这里我也一样选择的是“Y”（能够选N）

这几个配置选择yes 或者 no 对于咱们项目最大的影响就是，若是选择了yes 则生成的项目会自动有相关的配置，有一些loader咱们就要配套下载。因此若是咱们肯定不用的话最好不要yes，否则下一步要下不少没有用的loader（加载）

目录说明：

build目录:

这个文件夹主要是进行webpack的一些配置
就我我的以为啊,对咱们最有用而且可能会使用的就是webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三个webpack的配置文件，分别是基本webpack配置、开发环境配置、生产环境配置。实际上这些文件里面的内容，一些简单的配置都已经有了，包括入口文件、插件、loader、热更新等都已经配置好了。
咱们要作的只是根据本身的项目有什么loader须要增长的，好比生成环境须要加上UglifyJsPlugin插件等能够自行配置，或者一些插件增长或者不须要的删除，其实都是和业务相关了，其余的均可以不须要动。

config:

这几个配置文件我以为最主要的就是index.js 这个文件进行配置代理服务器，这个地方和咱们息息相关，和后台联调就是在这里设置一个地址就能够了。打开index.js 找到“proxyTable“这个属性，而后在里面加上对应的后台地址便可

proxyTable:在平时项目的开发环境中，常常会遇到跨域的问题，尤为是使用vue-cli这种脚手架工具开发时，因为项目自己启动本地服务是须要占用一个端口的，因此必然会产生跨域的问题。固然跨域有多种解决方式，这里就不一一例举，下次弄篇文章单独讲，在使用webpack作构建工具的项目中使用proxyTable代理实现跨域是一种比较方便的选择。

实现机制：本地服务器 --》 代理 --》目标服务器 --》拿到数据后经过代理假装成本地服务请求的返回值 ---》而后浏览器就顺利收到了咱们想要的数据

3. src文件夹：

这个文件夹是整个项目最主要以及使用频率最高的文件夹。

“assets”: 共用的样式、图片

“components”: 业务代码存放的地方，里面分红一个个组件存放，一个页面是一个组件，一个页面里面还会包着不少组件，通常本身编写的组件都会放在这个文件夹

“router”: 设置路由

“App.vue”: vue文件入口界面

“main.js：对应App.vue 建立vue实例，也是入口文件，对应webpack.base.config.js里的入口配置

4.static 文件夹：

存放的文件不会通过webpack处理，能够直接引用，例如swf文件若是要引用能够在webpack配置对swf后缀名的文件处理的loader，也能够直接将swf文件放在这个文件夹引用

5.package.json:

这个文件有两部分是有用的：scripts 里面设置命令，例如设置了dev用于调试则咱们开发时输入的是
npm run dev ；例如设置了build 则是输入 npm run build 用于打包;另外一部分是这里能够看到咱们须要的依赖包,在dependencies和devDependencies中，分别对应全局下载和局部下载的依赖包

5、 下载依赖包

上一步咱们已经生成好项目，如今打开以前说过的package.json 文件，找到devDependencies 和 dependencies ，在这里面能够删掉咱们不须要的，其余就则都须要使用 npm install 下载安装，例如vue： npm install vue –save-dev

这个过程会生成一个node_modules 文件夹，这一个过程可能会有一点耗时间，可是也是傻瓜式，一个个下载，下载好以后输入npm run dev 。若是有哪些缺漏的都会提示再补下载就行了

6、 npm run dev

当全部依赖包都下载好以后，输入命令：npm run dev 运行就能够看到一个自带的默认页面打开。此时项目就已经所有搭建好而且运行了~炒鸡简单吧，总结下来其实只有四步

npm install --global vue-cli 下载vue-cli脚手架
vue init webpack test 生成项目，造成基本结构
npm install 依赖包
npm run dev 运行

七 配置ESLINT

启动发觉报错，原来咱们是用了eslint检查格式，咱们要使用自动格式化成eslint支持的格式
安装eslint

二、打开用户配置
文件 -> 首选项 -> 设置

在用户设置中填写以下配置：
二、打开用户配置

文件 -> 首选项 -> 设置
在用户设置中填写以下配置：

替换成下面的

"eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]

eslint.autoFixOnSave 用来进行保存时自动格式化，可是默认只支持 javascript .js 文件

eslint.validate 用来配置做用的文件类型。

而后按ctrl+s 就会自动格式化

最后输出：

参考：
https://www.cnblogs.com/liaoa...
https://www.cnblogs.com/wanch...
http://www.ptbird.cn/vscode-a...