前期准备 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)  ---------------------是否安装程序的单元测试

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

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

 

Logo

前往低代码交流专区

更多推荐