Vue-cli3.0 scaffolding to create Vue project steps and process

Vue-cli 3.0 is a new scaffolding tool based on Vue.js. It can help us quickly create a Vue project and provides many convenient tools and configurations.

Now we will introduce step by step the steps and process of creating a project using Vue-cli 3.0.

Install Vue-cli 3.0

First you need to install Vue-cli 3.0 globally, which can be installed through npm:

npm install -g @vue/cli

After the installation is completed, you can use the following command to verify whether the installation is successful. :

vue -V

If the version number is output, the installation is successful.

Create a Vue project

Execute the following command in the command line to create a new project:

vue create my-project

where "my-project" is the project name, according to your needs to modify.

After executing this command, some project configuration options will appear, such as whether to use Babel, whether to use Vuex, whether to use ESlint, etc. You can choose according to your needs. If you are not sure, you can just press Enter and use the default options.

After the selection is completed, the project installation will be carried out, and it may take a certain amount of time to wait for the installation to be completed.

Run the project

After the project installation is completed, enter the project folder and use the following command to run:

cd my-project
npm run serve

This command will start a local server, which can be accessed through the browser http://localhost:8080 Check the project running effect.

Project directory structure

After using Vue-cli 3.0 to create the project, the directory structure of the project is as follows:

|--node_modules          // 存放项目运行所需的模块
|--public                // 存放静态资源文件
|  |--favicon.ico        // 网站图标
|  |--index.html         // 网站入口文件
|--src                   // 存放项目源码文件
|  |--assets             // 存放静态资源文件
|  |--components         // 存放组件文件
|  |--views              // 存放页面文件
|  |--App.vue            // 页面入口文件
|  |--main.js            // 项目入口文件
|--.gitignore            // Git 版本库忽略文件列表
|--babel.config.js       // Babel 配置文件
|--package.json          // 项目配置文件
|--README.md             // 项目说明文件
|--vue.config.js         // Vue 配置文件

Among them, the src directory is The source code file of the project, the public directory is the folder where static resources are stored. main.js is the entry file of the project, App.vue is the entry file of the page. Under the src directory, the assets directory stores static resource files, such as pictures, style sheets, etc. In the src directory, components stores component files, and the views directory stores page files.

Configuration files

During the project creation process, Vue-cli 3.0 also generated some default configuration files, which are all located in the root directory of the project. Among them, package.json is the project configuration file, which contains the declaration of dependencies, script commands and other information required by the project. babel.config.js contains Babel’s configuration information. vue.config.js Contains Vue configuration information.

Summary

Vue-cli 3.0 makes it more efficient and simpler for us to create, develop and maintain Vue projects by providing convenient tools and configurations. The above are the steps and process of creating a Vue project using Vue-cli 3.0. I hope it can be helpful to everyone.

The above is the detailed content of Vue-cli3.0 scaffolding to create Vue project steps and process. For more information, please follow other related articles on the PHP Chinese website!