Teach you how to create a project using vue-cli3 in five minutes (beginner's guide)

1. Build the Vue environment

Install Nodejs Download Nodejs from the official website. If you want a stable development environment, download the LTS (Long Time Support) version, which is stable.

Click me to enter the node official website

After installation, enter node -v in cmd to check whether the installation is successful. If the version number appears as shown below, it is successful.

2. Vue Scaffolding Tools

Install vue-cli globally and enter in the command line:

npm install --g vue-cli

Using the official image of npm directly in China is very slow. It is recommended to use Taobao image or yarn

The installation of Taobao mirror is as follows

npm install -g cnpm --registry=https://registry.npm.taobao.org
//After successful installation, use cnpm i xxx instead of npm install xxx

3. Create a project

vue create project name

vue create code //where code is the name of your project directory (press enter to confirm and proceed to the next step)

At the beginning, the following two items will appear when you press Enter

Default (Vue 3) ([Vue 3] babel, eslint) (The default configuration provides babel or eslint support)
Manually select features

We can use the up and down keys and the space bar to select what we need. Generally, we will choose manual configuration.

4. Select manually select (press enter to confirm and proceed to the next step)

Wang briefly described the function of each item:

• Babel mainly converts es6 syntax into compatible js (select)
• TypeScript supports writing code using TypeScript syntax
• Progressive Web App (PWA) Support [Make web pages more like native apps]
• Router supports vue routing configuration plug-in (usually selected)
• Vuex supports vue program state management mode (generally selected)
• CSS Pre-processors supports CSS pre-processors (usually selected)
• Linter / Formatter supports code style checking and formatting (selected)
• Unit Testing
• E2E Testing
  

Common project selections are as follows

5. After completing the selection, press Enter. Here we choose 3.x

6. After completion, press Enter to display the following interface

What this means is to ask you whether this project uses history mode. If you choose Y, you need to configure the background. Please refer to the vueRouter official website for details. Here we choose n

7. Press Enter to display the following interface

What this means is to ask you which CSS preprocessing language to choose. I generally use SCSS in my project. I choose the first one.

8. Press Enter to display the following interface

What this means is to choose a way to format the code: I usually choose ESLint + Prettier

9. Press Enter to display the following interface

What this means is to ask you when to perform code rule detection. I usually choose to detect on save, that is, Lint on Save

10. Press Enter to display the following interface

Here we mean where to put the configuration files for Babel, PostCSS, ESLint. Usually we choose to put them in a separate location to make the package.json file cleaner, so choose the first one.

11. Press Enter to display the following interface

Here you will be asked whether to record this configuration selection. After selecting, you will be asked to give this configuration a name so that you can quickly configure the selection next time. Finally, press Enter to initialize the project. After completion, it will be as shown below:

12. Start the project according to the prompts

According to the instructions, we first execute cd code, then execute npm run serve

13. When we need to customize webpack related configurations, we need to create a vue.config.js file in the project root directory. It will be automatically loaded by @vue/cli-server. The official website will provide detailed configuration content. You can go to the official website to check it out. That’s all for today. See you next time at the end of this issue! ! !

This is the end of this article about teaching you how to use vue-cli3 to create a project in five minutes (for beginners). For more relevant vue-cli3 project creation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!