vue创建一个脚手架

「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」

1.安装node.js

• 可以查看的的上一篇文章 # Node及nvm安装及环境变量控制（有效）

2.安装 vue-cli (要全局安装 -g)

cnpm install vue-cli -g

• 时间可能有点长，如果出现 error 则安装失败，但是 nojs 十分智能，如果报错会给出提示，按照提示敲就完事了。

• 可以使用 vue list 查看命令。一般使用 webpack 创建。

3.创建 vue-cli 项目

• 可以找到 一个目录 打开 cmd 这里有两种推荐方式 1.直接在上方输入 cmd 即可 2. 空白处 右键+shift 会出现一个蓝色框 相当于cmd 升级，自行了解。 可以根据 vue-cli 官网 来创建 项目。

vue create hello-world

• 上面两个是自动创建，可以选择第三个手动创建。

• 上下移动， 空格确认选择。

• Choose Vue version：选择Vue的版本。 Babel：是否使用babel。 TypeScript：支持使用TypeScript编写源码。 Progressive Web App(PWA)：是否支持渐进式网页应用（PWA）。 Router：是否支持vue-router。 Vuex：是否支持vuex。 CSS Pre-processors：是否支持CSS预处理器。 Linter/Formatter：是否支持代码风格检查和格式化。 Unit Testing：是否支持单元测试。 E2E Testing：是否支持E2E测试。 选择 vue.js 版本

• Pick a linter / formatter config: (Use arrow keys) 翻译：选择代码检查和格式化配置。

• ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier TSLint (deprecated) 这几个选项的具体情况稍后我们用专门的文章进行说明，此处我们就先选择 ESLint + Standard config 选项，然后按下回车键。 Pick additional lint features: (Press to select, to toggle all, to invert selection) 翻译：选择附加的语法检查配置，可以按下空格键选中选项，按下a键选择所有，按下i键进行反选，即选中的取消选中，没有选中的选中。

• Lint on save：保存时检查。 Lint and fix on commit：提交时检查和修复。

• Where do you prefer placing config for Babel, ESLint, etc.? 翻译：你更喜欢把Babel、ESLint等的配置放到哪里？

• In dedicated config files：在独立的配置文件中。 In package.json：统一放在package.json文件中。 根据项目情况进行选择，此处我们选择 In package.json 选项 然后问你是否保存 Save this as a preset for future projects? (y/N) 翻译：是否将此保存为将来项目的预置？ 如果保存的话，将来在创建项目的时候，就可以按照该配置进行创建了。这个大家可以自行尝试。 如果需要保存，在输入小写y，不需要的话输入大写N