How Vue builds environment and projects

This article will give you a detailed introduction to Vue's method of environment construction and project construction. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

1. Download and install node.js

https://nodejs.org/zh-cn/

2. Modify the package path

Create new folders node_cache and node_global in the node installation directory

• node_global global package download and storage
• node_cache node cache

CMD window executes two commands:

npm config set prefix "D:\jnodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

3. Set environment variables

User variables to modify path:

Add NODE_PATH to the system variable, the value is D:\nodejs\node_modules

##Add to path

4. Installation cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

5. Install vue, vue-cli scaffolding

cnpm install vue -g
cnpm install vue-cli -g

vue - V or vue --version queries the version of vue-cli

6. Build the project

vue init webpack "项目名称"

Project directory structure :

build folder: Inside are settings related to webpack development and packaging, including entry files, output files, used modules, etc.;
• config Folder: It mainly specifies the path of static resources in development and packaging, the file type to be compressed, the port number used for development, the use of virtual server cross-domain request API for development, etc.
• node_modules: The dependent library of the project;
• src folder: Our main operations, adding and modifying components, etc. are all operated in this folder, which will be described in detail below;
• static folder: Static resource folder, where resources that will not change are placed and copied directly to the final packaging directory (the default is dist/static);
• .babelrc: configuration using babel file, used to set transcoding rules and plug-ins;
• .editorconfig: Code specification file, which stipulates the use of spaces or tabs for indentation, whether the indentation length is two digits or four digits, etc. Code style, use If so, you need to download the corresponding plug-in in the editor;
• .eslintignore: Specify the files ignored by eslint;
• .eslintrc: Configure the detection rules of eslint and force the code to be written according to the rules;
.gitignore: Specifies the files ignored by git, and all git operations will not take effect on them;
• .postcssrc: Specifies the css precompiler used, which is configured with autoprefixer by default and automatically completes the browser Prefix;
• favicon.ico: The small icon next to the browser tab title, which needs to be pasted by ourselves;
• index.html: Home page file, when the project is running, it will Automatically insert the components we generated in the src folder into this file;
• LICENSE: the license declared by the project;
• package-lock.json: when node_modules or package.json changes Automatically generated files. The main function of this file is to determine the dependencies of the currently installed package so that the same dependencies can be generated during subsequent reinstallation, while ignoring updates that have occurred in some dependencies during project development;
• package.json: Specify project development and dependent libraries that need to be used in the production environment;
• README.md: It is equivalent to a notes file that provides some instructions on what needs to be paid attention to during the project development process.
  

Recommended learning:

vue.js tutorial

The above is the detailed content of How Vue builds environment and projects. For more information, please follow other related articles on the PHP Chinese website!