Full steps of vue2 project construction - super detailed

---

Environment configuration

node configuration

1. Download link: https://nodejs.org/en/

2. Check whether the installation is successful: If the version number is output, it means that we have successfully installed the node environment

//输入：
node -v

Install Vue CLI

1. Enter the following command in Terminal to install globally:

//三选一即可
cnpm install -g @vue/cli
npm install -g @vue/cli
yarn global add @vue/cli

Note: If you have installed the old version of VUE CLI, you need to uninstall it first

//三选一即可
npm uninstall vue-cli -g 
cnpm uninstall vue-cli -g 
yarn global remove vue-cli

2. Execute vue -V to view the version: if the version number is output, it means that we installed vue successfully

//输入：
vue -V

​Build a new project

Vue create builds a new project

vue create <Project Name> //文件名 不支持驼峰(含大写字母)
//如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作，必须通过 
winpty vue.cmd create hello-world
 启动这个命令

The following interface appears, it is successful

1. default (vue3 babel, eslint): The default setting (directly enter) is very suitable for quickly creating a prototype of a new vue3 project, without any npm package with any auxiliary functions

2. default (vue2 babel, eslint): The default setting (directly enter) is very suitable for quickly creating a prototype of a new vue2 project, without any npm package with any auxiliary functions

3. Manually select features: custom configuration (press the arrow key ↓) is the production-oriented project we need, npm package that provides optional features

Method 1: Just choose the first one (Default is installed automatically, press the Enter key to select)

If the following interface appears, it means success
Input: cd adminEnter again npm run serveto open the project

Project opening effect:

Open the link:

Method Two: Configure Custom Settings

Step 1: Select Manually select features

The following interface appears, it is successful

Step 2: Configure custom configuration values:

1 Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
2 ( ) Babel //Transcoder, which can convert ES6 code into ES5 code, so that it can be executed in the existing environment.
3 ( ) TypeScript// TypeScript is a superset of JavaScript (suffix .js) (suffix .ts) that includes and extends the syntax of JavaScript. It needs to be compiled and output as JavaScript to run in the browser. At present, few people use 4
( ) Progressive Web App (PWA) Support// Progressive Web Application
5 ( ) Router // vue-router (vue routing)
6 ( ) Vuex // vuex (vue's state management mode)
7 ( ) CSS Pre-processors / / CSS preprocessor (eg: less, sass)
8 ( ) Linter / Formatter // code style checking and formatting (eg: ESlint)
9 ( ) Unit Testing // unit tests (unit tests)
10 ( ) E2E Testing / /e2e (end to end) test

Step 3: Select the vue version, I choose 3.x

Step 4: Code style checking and formatting (eg: ESlint)

Pick a linter / formatter config? Choose a code formatting detection tool

Step 5: Pick additional lint features?

Code inspection method: check when saving or check when submitting;
I choose the first check when saving

第六步：Where do you prefer placing config for Babel, ESLint, etc.?

How to store configuration files such as Babel, PostCSS, ESLin, etc., in a separate configuration file? Or in package.json? It is
convenient to configure clear and beautiful, I choose package.json

Step 7: Save this as a preset for future projects?

Do you need to save the current configuration so that you can quickly build it in future projects? After saving, you can directly select this configuration when creating a project later, no need to configure it separately. After I select no and press Enter: the project is successfully created. Project opening effect: Open

the

link

:

Hello, I am Feichen.
Follow me~Reply to "Learning Materials" to obtain front-end learning resources, share technological changes, survival rules daily; industry insider, insight into opportunities.