This article is aimed at the novice who has no knowledge of vue and npm at all, and who does not even know the running environment and project construction.
Build a vue project using npm and vue-cli
Step 1: Install the runtime environment (node and npm)
nodeJ official website: http://nodejs.cn/ download the installation package (installation)
After the installation is complete, you need to check whether the installation is successful
Use the command line cmd to open the dos black window, run node -v and npm -v , the version number appears indicating that the installation is successful
Note ( npm comes with node and has been installed when node is installed)
How to upgrade the version of npm ? very simple
Execute the command: npm i –g to update (global installation: recommended) or npm install –g npm
Step 2: Install the tripod hand vue-clic
There are two installation methods for installing vue-cli (npm and cnpm), choose one
(1) Use npm to install vue-cli, global installation (this method is slow to install, foreign mirrors)
Run: npm install g vue --cli
(2) Use cnpm (domestic Taobao mirror) to install vue-cli
(2.1) First, register cnpm
运行： npm install -g cnpm --registry=https://registry.npm.taobao.org
(2.2) Check whether cnpm is successfully installed, and the version shows that the installation is successful
Run: cnpm -v
(2.3) Use cnpm to install the scaffolding hand vue-cli
Run: cnpm install –g vue-cli
Use vue –V (note: capital V ) to see if the installation is successful
Run: vue –V
Step 3: Officially start creating the project
1. Use the command: cd directory path, enter the path you specified to create the project
Such as:
2. Initialize the project with vue init webpack
Run: vue init webpack myfilst-vueproject ( custom file directory name )
Generally, by default, just press Enter.
So far, a Vue project has been created, and the directory structure is as follows: (see the official website for details of the structure)
3. Follow the prompts to run the process and install the module in the directory of the current project
run : cd project name
Run: npm install
Installing module dependencies. . . .
The module installation is complete, and there is one more folder in the project root directory
Step 4: Start/Run the Project
Run: npm run dev
Successful operation , the default effect is as follows:
If the normal page is not displayed, check whether the port is occupied. The default running port is 8080 .
Under the project root directory ->config->index.js
Modify the port value and re-run: npm run dev
Re-run every time you modify the configuration file
Step 5: Package and go online
Run: npm run build
After the packaging is completed, a dis folder will be generated in the root directory, which can be opened and browsed locally. When the project is online, just put the dis folder on the server .
end. . . . thanks