vue环境搭建

1）安装nodejs
地址：https://nodejs.org/en/ ，选择一个版本（最新版本支持性不太稳定,后面安装启动的时候如何报错了,很可能就是版本问题），选好安装路径一路next；确认是否安装成功：cmd执行node -v查看版本信息（此时在外部比如说vscode上可能还无法使用node需要重启一下vscode）；

2）vue-cli脚手架安装
需要用淘宝镜像的话先用npm安装淘宝镜像(cnpm)，命令：npm install -g cnpm –registry=https://registry.npm.taobao.org ，然后执行(cnpm)npm install -g vue-cli，查看是否安装成功：vue -V（这个V一定要大写）;

3）创建vue项目
执行vue init webpack projectName，注意安装目录，自行切换目录;(应该是不需要单独安装webpack，如果需要先安装，命令：(cnpm)npm install -g webpack，-g表示全局，如果不需要全局就去掉-g；如果vue不是可用命令在前面加npx-npx vue init …)

4）创建vue 项目时会cmd窗口会出现一些配置信息，配置如下：

此处并不难理解，Project name起的时候不要有大写字母，大写了会提示你的；Use ESLint to lint your code，可不可以yes,具体是什么可以，出错了怎么办可以参考https://www.jianshu.com/p/8160a97d21c1这个链接

5）安装依赖包
切换到项目目录:cd projectName 安装(cnpm)npm install，此时你会发现已经创建的项目结构里面会多出一个node_modules的文件夹；

6）运行项目
执行(cnpm)npm run dev，打开浏览器输入localhost:8080，出现vue界面则表示安装成功。这里的端口号可自行修改，修改文件config/index.js下的port参数，重启一下(cnpm run dev)浏览器输入新端口地址即可。(如果不想用localhost想用ip地址则修改index.js下的host参数为0.0.0.0，表示通过本机的一切IP地址)

7、说下页面的入口文件，

前端页面都在src下以.vue为文件类型开发项目

至此vue初步搭建就已经完成了，但项目中要用到的插件、配置、实现代码以及后期的打包还需要很长的过程，加油

下面记录一下个人项目中需要安装的vue插件：

axios:npm install --save axios//请求接口
less-loader: npm install less less-loader --save//支持css预处理less语法
vuex: npm install --save vuex//vuex 状态管理模式,存储管理应用的所有组件的状态
vuex-persistedstate: npm i -S vuex-persistedstate//持久化保存数据，vuex刷新会重新更新状态

// h5 ui框架
mint-ui: npm i mint-ui --save // i也就是install，插件名也可以放到--save后面
muse-ui: npm install --save muse-ui
vant: npm install --save vant

// pc ui框架
element-ui: npm install --save element-ui

以及vscode初次使用需要的配置和插件
1、拓展项（左侧某一个）：
vetur --代码高亮，
gitlens --鼠标放的那行代码提交信息（作者，时间，备注），
Auto Complete Tag --自动补全标签，（集成了 Auto Close Tag 和 Auto Rename Tag 的功能，但这两个还是需要在该插件里面单独install）。
ESLint --代码格式校验，格式不规范会报红，鼠标有提示可点击修改。
光标问题（代码是黑色的光标也是黑色的看不清）：电脑控制面板-鼠标-指针-自定义-文本选择-浏览-beam_r（其实是带点白的）
2、setting.json
入口

右边随便某个setting.json打开都行
下面是我在用eslint时vue文件不校验（我暂时只用的这个，因为是接手的老项目，并没有开启这些校验，我只想在我开发涉及到的东西不要存在格式问题就行），配置过程中查了点资料，写了几个感觉有用的，其他大家可以自己百度下

{
    "diffEditor.ignoreTrimWhitespace": false, // 对比普通模式，忽略空格差异
    // vscode默认启用了根据文件类型自动设置tabsize的选项
    // "editor.detectIndentation": false,
    // 重新设定tabsize
    // "editor.tabSize": 2,
    // 当保存时，eslint自动帮我们修复错误，包括格式化
    // "editor.codeActionsOnSave": {
    //     "source.fixAll": true
    // },
    // 保存代码，不自动格式化，盲猜如果使用上面那个又不想格式化配合这个
    // "editor.formatOnSave": false
    // "eslint.enable": true, // 开启eslint检查，默认应该是开启的吧
    // "eslint.run": "onType", // 一旦内容有变化就会运行eslint，检查代码（这个应该是默认的吧）；也可以选择 onSave在保存时自动运行eslint 
    // 对vue和html文件启用校验
    {
    "diffEditor.ignoreTrimWhitespace": false, // 对比普通模式，忽略空格差异
    // vscode默认启用了根据文件类型自动设置tabsize的选项
    // "editor.detectIndentation": false,
    // 重新设定tabsize
    // "editor.tabSize": 2,
    // 当保存时，eslint自动帮我们修复错误，包括格式化
    // "editor.codeActionsOnSave": {
    //     "source.fixAll": true
    // },
    // 保存代码，不自动格式化，盲猜如果使用上面那个又不想格式化配合这个
    // "editor.formatOnSave": false
    // "eslint.enable": true, // 开启eslint检查，默认应该是开启的吧
    // "eslint.run": "onType", // 一旦内容有变化就会运行eslint，检查代码（这个应该是默认的吧）；也可以选择 onSave在保存时自动运行eslint 
    // 对vue和html文件启用校验
    //  这种格式可能会报错
     // "eslint.validate": [
	// 	 "javascript",
	// 	  //  "javascriptreact",
	// 	  "typescript",
	//       // "typescriptreact",
	//       {
	// 	    "language": "html",
	// 	    "autoFix": true
	// 	  },
	// 	  {
	// 	   "language": "vue",
	// 	    "autoFix": true
	// 	  },
	// ]
	// 需要改成单字符串形式
    "eslint.validate": [
        "javascript",
        // "javascriptreact",
        "typescript",
        // "typescriptreact",
       "html",
       "vue",
    ]
}

3、操作
打开项目：我只说快捷键，ctrl+r，下拉中快速切换。
方法、文件跳转：页面里面的引入文件、调用方法，鼠标放到该代码上，按ctrl之后，代码下方有下划线，此时点击即可跳转到对应方法、文件所在地方。