安装node.js最新版
这里安装的是8.11.4版
更新npm至最新版
安装node.js后， npm默认版本为： 6.1.0
使用
npm install npm -g更新npm至最新版
安装vs code
安装过程就忽略了.
安装@vue/cli
> npm install -g @vue/cli
创建一个vue-demo-project工程
创建过程中默认配置（开箱即用）
打开工程
默认情况下， VS code是使用英文的， 有需要的话， 大家也可自行修改为中文：
- 按下ctrl+p, 输入:
> Config, 选择： “Configure Display Language"image.png -
将原先的：
image.png修改为：
image.png
修改并保存后， 会提示安装语言包， 安装即可：
打开一个.vue的文件时， 会提示推荐安装vetur插件， 当然选择安装了。安装成功后，会提示重启vscode
Vetur支持.vue文件的语法高亮显示，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件，比如Sass和TypeScript等等
eslint
此时打开一个vue文件并编辑， 保存时并不会自动进行格式化， 这里还需要安装一些依赖和一些配置。
首先需要安装eslint
> npm install -g eslint
安装vscode 插件eslint
安装好vscode插件后， 执行vscode如下命令：
此时会在终端执行以下命令， 并按提示进行选择：
d:\Project\vue-demo-project>node_modules.bin\eslint.cmd --init
? How would you like to configure ESLint? Answer questions about your style
? Which version of ECMAScript do you use? ES2015
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? Yes
? Do you use JSX? Yes
? Do you use React? Yes
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Double
? What line endings do you use? Windows
? Do you require semicolons? No
? What format do you want your config file to be in? JSON
The config that you've selected requires the following dependencies:
eslint-plugin-react@latest
Successfully created .eslintrc.json file in d:\Project\vue-demo-project
d:\Project\vue-demo-project>
完成以上动作后， 会在当前工程目录下生成一个 .eslintrc.json文件
vs code中配置eslint保存时自动格式化
具体配置如下：
{
"files.autoSave": "off",
"files.autoSaveDelay": 1000,
"team.showWelcomeMessage": false, "emmet.syntaxProfiles": { "vue-html": "html", "vue": "html" }, "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript",{ "language": "vue", "autoFix": true }, "javascriptreact", "html", "vue" ], "eslint.options": { "plugins": ["html"] }, //为了符合eslint的两个空格间隔原则 "editor.tabSize": 2, "eslint.enable": true } eslint相关问题
1. eslint未生效
查看并检查下eslint server是否启动或报错
若有出错， 一般会给出提示， 按提示处理就好了。
2. 报错： Expected linebreaks to be 'CRLF' but found 'LF'. (linebreak-style)
有时会出现报错信息： Expected linebreaks to be 'CRLF' but found 'LF'. (linebreak-style)
不同的操作系统下，甚至是不同编辑器，不同工具处理过的文件可能都会导致换行符的改变。
如果实在找不出原因， 或者无法解决， 可以先关闭此项检测。
// 统一换行符，"\n" unix(for LF) and "\r\n" for windows(CRLF)，默认unix // off或0: 禁用规则 'linebreak-style': 'off' 3. 使用vue/cli 3.0 自定义配置项创建工程后, vscode中eslint无法自动修复格式的问题
原因: .eslintrc.js文件中缺少了配置, 如下图所示, 添加右侧红框部分后, 添加依赖eslint-plugin-html后即可.
附上.eslintrc.js详细备注
module.exports = {
// 默认情况下，ESLint会在所有父级组件中寻找配置文件，一直到根目录。ESLint一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
root: true,
// 对Babel解析器的包装使其与 ESLint 兼容。 parser: 'babel-eslint', parserOptions: { // 代码是 ECMAScript 模块 sourceType: 'module' }, env: { // 预定义的全局变量，这里是浏览器环境 browser: true, }, // 扩展一个流行的风格指南，即 eslint-config-standard // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style extends: 'standard', // required to lint *.vue files plugins: [ // 此插件用来识别.html 和 .vue文件中的js代码 'html', // standard风格的依赖包 "standard", // standard风格的依赖包 "promise" ], //配置的一些规则 'rules': { // allow paren-less arrow functions 'arrow-parens': 0, // allow async-await 'generator-star-spacing': 0, // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 } } 最终的.eslintrc.json文件内容如下
{
"env": {
"browser": true,
"commonjs": true, "es6": true }, "extends": "eslint:recommended", "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 2018, "sourceType": "module" }, "plugins": [ "react" ], "rules": { "indent": [ "error", "tab" ], "linebreak-style": "off", "quotes": [ "error", "double" ], "semi": [ "error", "never" ] } }来源：oschina
链接：https://my.oschina.net/u/4256408/blog/3520321