Vue cli3 project construction process

In short:

Note: Vue 3.0 projects currently need to be upgraded from Vue 2.0 projects

Table of contents

1. Preparation

Two, build

3. Directory structure

1. Directory diagram

2. Directory analysis

1. Preparation

npm
node.js

Two, build

1. Build a Vue development environment and install scaffolding tools

sudo npm install -g @vue/cli

2. After the installation is successful, check whether the version is installed successfully

vue -V

The latest version is: @vue/cli 5.0.1

3. Initialize the vue project

vue create vue3-demo

After entering the command, a command line interaction window will appear; you can choose Manually select features:

4. Then select different configurations according to your own requirements (press "space bar" to select/deselect, A key to select/deselect all)

5. Enter the project folder to run the project

npm run serve

6. Vue cli3 graphical interface to create projects

vue ui

Execute the above command, a project management interface will pop up in the browser:

6.1 We can click the "Create" option to create a project, select "Create project here" at the bottom, and you can also choose the path at the top of the page

6.2. Then enter our project name, select the package management tool as npm, and click Next:

6.3. Configure according to individual needs (default configuration or manual configuration)

6.4. Next, wait for the installation to complete. After the installation is complete, the management interface is as follows:

3. Directory structure

1. Directory diagram

1. The command line tool vue-cli (runoob-vue3-test):

2、Vite（runoob-vue3-test2）

2. Directory analysis

directory/file	illustrate
build	Project construction (webpack) related code
config	Configuration directory, including port numbers, etc. We can use the default for beginners.
node_modules	Project dependencies loaded by npm
src	Here is the directory we want to develop, basically everything to be done is in this directory. It contains several directories and files: assets: place some pictures, such as logo, etc. components: A component file is placed in the directory, which can be omitted. App.vue: project entry file, we can also directly write components here instead of using the components directory. main.js: The core file of the project. index.css: style file.
static	Static resource directory, such as pictures, fonts, etc.
public	Directory of public resources.
test	Initial test directory, can be deleted
.xxxx files	These are some configuration files, including syntax configuration, git configuration, etc.
index.html	Home entry file, you can add some meta information or statistical codes.
package.json	Project configuration file.
README.md	Project documentation, markdown format
dist	This directory will be generated after packaging with the npm run build command.