先安装 Node 下载 | Node.js 中文网 (nodejs.cn)
安装 vue-cli
npm install -g @vue/cli
在你放置项目的目录打开 cmd 窗口，必须使用 cmd 窗口，否则不能进行选择，运行：
vue create demo
image.png
选择自定义配置
使用键盘上下键进行操作，空格键选中，回车键确认
image.png
一般选中这几项，如果你使用 TypeScript 可自行选择，回车进入下一步
image.png
选择你需要的 Vue 版本
image.png
设置 Vue 路由模式，输入 y 则为 history 路由， n 则为 hash 路由，回车进入下一步
image.png
选择 css 预处理器，我用的 scss，回车进入下一步
image.png
选择 ESLint 配置，建议选第一项，后面三项要求比较严格。
ESLint 在多人开发时会很有用，防止新手代码不规范。
image.png
选择在保存的时候进行 Lint 检查
image.png
把配置单独放入文件
image.png
保存此次设置，下次创建项目可直接使用
image.png
输入设置名称
image.png
开始安装项目
image.png
image.png
安装完成后进入项目目录，打开 cmd 窗口运行 npm run serve
npm run serve
image.png
浏览器输入项目运行地址 http://localhost:8080 打开项目
image.png
默认的 Eslint 校验在开发过程中不好用，非常容易报错。
可以修改 .eslintrc.js 文件，将部分格式错误改为 warn 警告提示，而不报错
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended'
],
parserOptions: {
parser: '@babel/eslint-parser'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-unused-vars': 1,
'no-unreachable': 1,
}
}
保存之后重启。
值说明：0 不检查 1 警告 2 报错
no-unused-vars // 不能有声明后未被使用的变量或参数
no-unreachable // 不能有无法执行的代码
