- 1. Go into a directory , Create project
- 2. We choose manual configuration here
- 3. Select the configuration you need
- 3.1 Choose whether to use history router
- 3.2 choice css The preprocessor
- 3.3 choice Eslint Code validation rules
- 3.4 Choose when to do code rule detection
- 3.5 Choose unit tests
- 3.6 Choose how to store the configuration
- 3.7 Whether to save the current configuration
- 4. Waiting for project to be created
- 5. Execute the command it gives , You can go directly to
Before building the project , Please make sure you have installed node, npm, vue cli. Not installed can refer to the following link to install .
How to install node?
Install well node It is installed by default npm 了 , So you don't have to install it separately .
How to install vue cli?
The theater environment has been set up , Start acting ！
1. Go into a directory , Create project
Corresponding command ：
vue create project-one
2. We choose manual configuration here
Press ↓ choice “Manually select features”, Press again Enter
3. Select the configuration you need
adopt ↑ ↓ Arrow to select the item you want to configure , Press Space It's a check , Press a It's all... All , Press i It's a negative election . The specific meaning of each configuration item will be explained below .
When you're done, press Enter. Select the specific package of each corresponding function . Choose what you are good at , No one is good at , Choose the one that is widely used , ha-ha , It's convenient to consult others .
3.1 Choose whether to use history router
Vue-Router Using the browser's own hash Patterns and history Pattern to achieve front-end routing （ By calling the interface provided by the browser ）.
I suggest to choose n. In this way, it can be used directly after being packed and thrown on the server , Later to use words , You can drive it again by yourself .
choose yes You need to set it on the server side .
Use history mode for router? (Requires proper server setup for index fallback in production)
3.2 choice css The preprocessor
I chose Sass/Scss(with dart-sass)
node-sass It's auto compiled, real-time ,dart-sass It needs to be saved before it takes effect .sass At present, the government mainly promotes dart-sass The latest features will be implemented on this first .（ The answer refers to http://www.imooc.com/qadetail/318730）
3.3 choice Eslint Code validation rules
3.4 Choose when to do code rule detection
( ) Lint on save // Save and test ( ) Lint and fix on commit // fix and commit Time to check
It is recommended to select Save to detect , wait until commit When , Problems may have accumulated a lot .
3.5 Choose unit tests
> Mocha + Chai //mocha flexible , Only a simple test structure , If you need other functions, you need to add other libraries / Plug in complete . You must install... In a global environment Jest // Simple installation and configuration , Easy to use . built-in Istanbul, You can see the test coverage , Compare with Mocha: Simple configuration 、 Test code is simple 、 Easy and babel Integrate 、 Built in rich expect
3.6 Choose how to store the configuration
> In dedicated config files // Independent file placement In package.json // discharge package.json in
If it's a choice Independent file placement , The project will have several separate files as shown in the figure below .
3.7 Whether to save the current configuration
type N Don't record , If you type Y You need to enter a save name , As the first 2 The name I saved in this step is test.
4. Waiting for project to be created