Vue:vue-cli 4.0 installation and project construction

Environment build

1. install nodejs

npm install -g npm   npm自动更新到最新版本
node -v或者npm -v   查看nodejs是否安装成功

2. Configure Taobao Mirror

npm config set registry https://registry.npm.taobao.org   配置淘宝镜像
npm config get registry   查看镜像地址是否设置成功

3. Configure the sass address

npm config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
npm config get sass_binary_site  查看是否设置成功

4. Install scaffolding

vue -V    查看是否存在vue版本
npm uninstall vue-cli -g   如是有的话，就用命令卸载
npm install --global vue-cli   安装脚手架

create project

1. vue create + "project name"; or vue ui for page creation
2. There are two options here:

（1）default (babel, eslint)默认套餐，提供babel和eslint支持；
（2）Manually select features自己去选择需要的功能。

##Features

• TypeScript supports writing source code using TypeScript;
• Progressive Web App (PWA) Support PWA support;
• Router supports vue-router;
• Vuex supports vuex;
• CSS Pre-processors support CSS pre-processors;
• Linter / Formatter supports code style checking and formatting;
• Unit Testing supports unit testing;
• E2E Testing supports E2E testing;
• I chose Babel, Router, Vuex, CSS Pre-processors, Linter/Formatter

3. Arrow keys to move up and down, space to select, Enter to confirm;
4. Choose whether to use the routing history router, in fact, to put it bluntly, whether the path has #, it is recommended to choose N, otherwise the server needs to be configured;
5. I chose Sass/SCSS (with dart-sass) as the css preprocessor. node-sass is automatically compiled in real time, and dart-sass needs to be saved to take effect;
6. Select ESLint code verification rules to provide a plug-in javascript code detection tool, ESLint + Prettier are used more;
7. Then choose when to perform code verification, Lint on save to check when saving, Lint and fix on commit fix or check when committing, the first is recommended;
8. How to store the configuration, In dedicated config files are stored in a separate file, In package.json is stored in package.json; in line with the idea of ​​a simple project structure, I chose the second one;
9. Whether to save the current preset, the next build does not need to be configured again;

10. Complete the installation.

cd + 项目名称
npm run serve 启动项目