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

前期准备 vue 2.9的配置：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 

 

下载安装完成之后，进行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

1. 在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端口不被别的程序所占用。

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