前期准备 vue 2.9的配置:http://blog.csdn.net/superkm/article/details/79533783
<http://blog.csdn.net/superkm/article/details/79533783>

需要准备的环境和工具都准备好,接下来就开始使用vue-cli来构建项目。

 

在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录:①cd 目录路径  ②如果以安装git的,在相关目录右键选择Git Bash Here

打开命令终端,通过webpack工具新建vue项目(方便最终打包使用):

vue init webpack vueFirst ,注意这里的“vueFirst” 是项目的名称可以说是随便的起名,但是需要主要的是“不能用中文”。

 

例:

vue init webpack vueFirst           ---------------------在E盘创建了vueFirst的项目

? Project name (vueFirst)  vue   ---------------------项目名称

? Project description (A Vue.js project) first vue project  
---------------------项目描述

? Author super  --------------------- 项目创建者

? Vue build (Use arrow keys)  直接回车 出现  ? Vue build standalone

? Install vue-router? (Y/n)  y  --------------------- 是否安装Vue路由,通过路由控制页面跳转

? Use ESLint to lint your code? (Y/n)  n
---------------------是否启用eslint检测规则,这里个人建议选no

? Setup unit tests? (Y/n)  y ---------------------是否安装程序的单元测试

? Pick a test runner?  回车默认  ---------------------选择一个测试工具

? Setup e2e tests with Nightwatch? (Y/n)  y 

然后会问你是否使用npm进行安装刚的配置,回车默认即可。



 

如果已经配置好vscode,可以直接跳过下面四步

项目搭建完成后,接下在下载安装开发工具,这里推荐使用 Visual Studio Code  <https://code.visualstudio.com/>



 

下载安装完成之后,进行vue在vscode里的配置

第一步,要支持 vue 文件的基本语法高亮

在扩展商店中选择使用 vetur



 

安装完 vetur 后还需要加上这样一段配置下:

选择 文件>首选项>设置 在最右侧 用户设置中加入以下代码
  "emmet.syntaxProfiles": {         "vue-html": "html",         "vue": "html"
    },
第二步,支持 vue 文件的 ESLint



ESLint 有很多规范是帮助我们写出更加优雅而不容易出错的代码的。

ESLint 不是安装后就可以用的,还需要一些环境和配置:首先,需要全局的 ESLint , 如果没有安装可以使用 cnpm install -g
eslint来安装。其次,vue文件是类 HTML 的文件,为了支持对 vue 文件的 ESLint ,需要 eslint-plugin-html
这个插件。可以使用 cnpm install -g eslint-plugin-html 来安装接着,安装了 HTML 插件后,还需要在 vscode
中配置下 ESLint:
   "eslint.validate": [         "javascript",         "javascriptreact",    
    {             "language": "vue",            "autoFix": true         }    
],     "eslint.options": {         "plugins": ["html"]     },
进行 eslint --init  的依赖安装

 



 

 

会安装以下依赖
[email protected] [email protected]>=2.2.0
[email protected]>=5.2.1 [email protected]>=3.5.0
[email protected]>=3.0.0
*  
同时在项目目录下生成.eslintrc.js文件。里面只有最基本的内容:
module.exports = { "extends": "standard" };
*  
表明我们使用的规则是standard规范所定义的规则。 
2. 然后本地安装最新的eslint
npm i -D eslint
* 在package.json 的 scripts中添加一行: "lint": "eslint --ext .js,.vue src"
运行:
npm run lint
VS Code会提示我们找不到eslint-config-standard: 


安装它:
npm i -D eslint-config-standard
然后运行
npm run lint
这时就会有报错的提示了

 

最后,别忘了在项目根目录下创建 .eslintrc.json

 

 



 

 

第三步,更换vscode的文档图标

打开刚刚搭建的项目 



会发现文档目录结构不是很美观



 

为了浏览方便,下载VsCode中的图标插件 vscode-icons , 可以控制vscode中的文件管理的树目录显示图标





是不是好看多了 : )

第四部,添加代码自动补全插件

搜索 vue 2 snippets,选择安装更新



开始运行vue项目

一定要 cd 命令进入创建的工程目录

安装项目依赖:因为自动构建过程中已存在package.json文件,所以这里直接安装依赖就行。要从国内镜像cnpm安装,cnpm install 

安装 vue 路由模块 vue-router 和网络请求模块 vue-resource,输入:cnpm install vue-router
vue-resource --save。

简单的说明下各个目录都是什么:



启动项目,输入:npm run dev。服务启动成功后浏览器会默认打开一个“欢迎页面”,如下图:



 

注意:这里是默认服务启动的是本地的8080端口,所以请确保你的8080端口不被别的程序所占用。

至此简单的一个项目构建完毕