Vue 环境搭建——vscode

vscode下载安装

官网下载地址：
https://code.visualstudio.com/

image.png image.png image.png
image.png image.png image.png image.png image.png image.png image.png image.png

设置中文环境：
快捷键Ctrl+Shift+P选择Configure Display Language

image.png

找到中文安装包

image.png

在线安装

image.png

安装后需要重新启动环境，再次选择中文简体切换语言环境

image.png

安装插件

点击左侧扩展选项，输入你想找的插件进行安装即可

image.png

核心插件

1、Vetur
vscode上开发vue的核心插件，提供了代码高亮，格式化,emmet，lint等核心功能。

image.png

2、beautify
一个代码美化插件，提供了代码美化功能,当然我们并不直接用它，它为vetur提供了格式化html的功能(vetur官方文档上说，这个将很快被移除，因为这个插件有很多bug一直得不到解决)

image.png

3、Prettier
一个代码格式化插件，提供格式化代码的功能，它可以使用eslint的配置，一键修改各种eslint问题,而且不增加快捷键，它通过增强原有的代码格式化功能来实现(vetur官方文档上说可以不用安装prettier，但是安装好了，可以更好的配置,因为配置项有智能提示)

image.png

4、ESLint
js是一个很自由的语言，你怎么写都不报错，怎么写都是对的，但是如果你真的随便写，就会到处报错，根本找不到哪里错了，所以，我们加上eslint来约束代码，eslint的规则很多，配置简单,也有很多现成的模板。
ps：配置说明：http://eslint.cn/docs/user-guide/configuring

image.png
ESLint 不是安装后就可以用的，还需要一些环境和配置：
首先，需要全局的 ESLint , 如果没有安装可以使用cmd 输入npm install -g eslint来安装；
其次，vue文件是类 HTML 的文件，为了支持对 vue 文件的 ESLint ，
需要eslint-plugin-html这个插件。可以使用cmd输入： npm install -g eslint-plugin-html 来安装；
当上述两个都装好后，还需要在 vscode 中配置下 ESLint：
image.png

5、Project Manager
项目管理，方便保存各种项目目录，一点就切换，非常方便。

image.png

推荐插件

1、颜色主题 Atom Material Theme
菜单栏和编辑器可以区分颜色

image.png

2、文件图标主题 Material Icon Theme
左侧文件树的图标，根据文件类型显示不同的图标。

image.png

3、Makedown增强 Markdown Preview Enhanced
makedown增强插件，比vscode自带的强大很多，可以实时预览markdown，还可以导出各种常用格式，html，pdf都不是问题，还可以导出word文档（word要麻烦些）。

image.png

4、括号增强 Bracket Pair Colorizer
js代码中，括号一直是一个问题，难以避免括号问题，这个扩展为不同层级的括号添加了颜色，一眼就能看到，比vscode自带的那个括号提示好很多。

image.png

5、 Change Case
非常实用的小功能，可以将变量名切换成各种常用造型，驼峰的，大驼峰的，随便切，再也不用选个字母改大小写了。

image.png

6、Output Colorizer
给输出加点色彩。

image.png

7、配置同步 Settings Sync
通过github来同步你的vscode配置，需要去github上去生成一个key，当然插件介绍里有说明，也有指引，自己可以研究。

image.png

8、Sublime Commands
sublimetext里面有个交换选择的快捷键，就是选中两个词，然后按一个快捷键，两个词就交换位置了，这个操作我们经常做，而且挺麻烦，复制剪切的，现在好了，用了这个小插件，这个功能也补上了。

image.png

7、vscode-fileheader
为你的文件加上文件头，可以通过配置来控制文件头的内容。

image.png

主题颜色设置

image.png image.png

对于这个软件麻烦的就是要按照各自插件的规格去配置，这里我们先配置两个核心插件：
在文件—>首选项—>设置 中

image.png image.png

安装node.js

下载地址：https://nodejs.org/en/download/

image.png
image.png
image.png
image.png
image.png
image.png image.png

如果正确输出版本号，说明我们的NodeJS和NPM就安装好了。

image.png

如果node的全局路径没有自动添加进入，可以手动添加下。

image.png

安装淘宝镜像
用cnpm替代cnpm，因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常。
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装webpack

cnpm install webpack -g

安装vue脚手架

cnpm install vue-cli -g

开始创建VUE项目

需要注意的是项目的名称不能大写，不然会报错
在安装时会询问你:
①、Project name (sanfeng1)；项目名称（sanfeng1）。（确定按enter，否按N）
②、Project description (A Vue.js project)；项目描述（一vue.js项目）。（随意输入一段简短介绍，用英文）
③、Author (sunsanfeng)；作者（sunsanfeng）。（确定按enter，否按N）
④、Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render 　　　　　　　　functions are required elsewhere；Vue公司的建立（使用箭头键）>运行时+编译器：大多数用户推荐运行时间：约6kb轻民+ gzip，但模板（或任何Vue具体HTML）只允许在。VUE文件渲染功能是必需的其他地方。（按enter）
⑤、Install vue-router? (Y/n)；安装的路由？（/ N）。（可安可不安，以后也可以再安，根据需求选择）
⑥、Use ESLint to lint your code? (Y/n)；使用ESlint语法？（Y/ N）。（使用ESLint语法，就要做好心理准备，除非你非常懂ESLint语法，要不就会处处报错，我就被逼疯过，建议N）
⑦、Setup unit tests with Karma + Mocha? (Y/n)；设置单元测试？（Y / N）。（选N）
⑧、Setup e2e tests with Nightwatch? (Y/n)；Nightwatch建立端到端的测试？（Y / N）。（选N）

image.png

cd vuedemo       (进入项目目录)
cnpm install    （安装项目依赖）

image.png

cnpm run dev    （执行项目）

image.png
image.png

当vue跑起来后可通过页面http://localhost:8080来打开页面

image.png