1. There are two ways to create a vue project: based on webpack and cli .
Note: version conflicts, if you have a version or a lower version, you can upgrade
npm update -g @vue/cliThis is my version
2. Environment: VS Code
3. First, create a new project file under the project folder.
new terminal
go to project file
- Method 1: The name of the Vue init webpack project folder
- Method 2: Open VSCode, open the terminal, enter the directory: D:\VScodeWorkspace, enter the name of the vue create project folder (after installing yarn, you can use yarn instead of npm to create a project)
- cli mode
vue create hello-world
Choose according to your needs, and generally use the Enter key to select the default configuration.
Building:
The creation is complete, follow the prompts, enter the project and run it
The directory is shown in the figure below:
The purpose of each folder and file in the Vue-cli project:
dist folder: the default static resource file packaged and generated by the npm run build command, used for production
and deployment Files, css, js, images, and index src folder: store project source code and resource files that need to be referenced src-api folder: put code files for ajax-related operations: index.js (related interface), ajax.js (encapsulation axios, interceptor). Some are called service: self-configured vue request background interface method src-common folder: stylus mixed file .styl, do not write to public or src-components folder: store some public components extracted from vue development src- mock folder: mock data storage files and mock simulation interface (the background interface can be simulated if there is no background interface or the interface is incomplete) src-pages folder: components related to routing src-router folder: vue-router, router and Routing configuration src-store folder: store state data in vue, use vuex to centrally manage App.vue file: use tags to render the .vue component main.js file of the entire project:
The entry file of the vue-cli project
package.json file: used for the node_modules resource department and npm command management for starting and packaging projects
Build folder: used to store webpack related configurations and scripts. During development, webpack.base.conf.js under this folder is only occasionally used to configure css precompiled libraries such as less and sass, or to configure the UI library
config folder: mainly stores configuration files, used to distinguish development environment, line Depending on the environment, it is often used to configure the port number of the development environment in config.js under this folder, whether to enable hot loading or set the relative path of static resources in the production environment, whether to enable gzip compression, and the name of the static resource generated by the npm run build command and path etc.
Based on webpack
vue init webpack hello-world
Similarly, configure as needed
Similarly, follow the steps to enter and start the project
The project directory is shown in the figure below
- Vue-cli encapsulates webpack internally and only provides a few external dependencies. And it has done a lot of optimizations suitable for vue projects, and you can use vue.config.js to manage projects. package.json is very refreshing
- webpack is more in line with specific needs, after all, it is native. However, it is also more complicated to manage. However, there is an upgrade in the community, and you can get the upgrade advantage in the first place. The former can only wait for the vue-cli project to be upgraded
- Generally speaking, vue-cli is enough, but what can be achieved by vue-cli, webpack must be able to achieve it, otherwise, not necessarily