vue 2.9 创建第一个vue项目（包括 vscode工具针对vue的配置）

前期准备 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 的依赖安装

会安装以下依赖
eslint-config-standard@latest eslint-plugin-import@>=2.2.0
eslint-plugin-node@>=5.2.1 eslint-plugin-promise@>=3.5.0
eslint-plugin-standard@>=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端口不被别的程序所占用。

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

热门工具换一换

vue 2.9 创建第一个vue项目（包括 vscode工具 针对vue的配置 ）