First, then we start to build from the simplest environment:
1. Install node.js
From node.js official website to download and install the node, the installation process is very simple, all the way "Next" on it (fool-installed).
After installation, the open command line tool (win + r, and then enter cmd), the input node -v, as shown below, if the corresponding version number occurs, the installation is successful.
C:\Users\19565>node -v v12.13.1 C:\Users\19565>npm -v 6.12.1
It should be note, because after the official website to download and install node.js, it already comes npm ( package management tool ), and the other should be noted that the best version npm 3.xx or more, so as not to affect the follow-up.
2. Install webpack
Open a command line tool, type: WebPACK npm install -g, ( -g represents the global installed )
Input webpack -v Once installed, as shown below, if the corresponding version number appears, the installation was successful.
C:\Users\19565>webpack -v 4.42.0
3. Construction scaffolding installation tool vue-cli
Open command line tool input: npm install vue-cli -g, after installation vue -V input ( note that this is capital "V" ), as shown below, if the corresponding version number occurs, the installation is successful.
C:\Users\19565>vue -V 2.9.6
Second, through the four steps above, we need to prepare the environment and tools are ready, then we began to use to build the project vue-cli
1. Find a file in a folder on your hard disk with the release of designated projects to the relevant directory: cd directory path
C:\Users\19565>E: E:\>cd vuestu
2. Install vue scaffolding input: vue init webpack pack1, pay attention here, "pack1" is the name of the project can be said to be casually named, but the main need is "not a Chinese."
E: \ vuestu> vue the init WebPACK pack1 --------------------- This is the command to install vue scaffolding ? Project name pack1 -------- ------------- project name ? project A Vue.js the description project --------------------- project description ? Author liuxiaotao - -------------------- project creator ? Vue Build Standalone ? the Install VUE-Router? Yes ---------------- ----- whether to install Vue route, that is, the future is a spa (but the module page application needs) ? ESLint to the use lint your code? No ------------------ --- whether eslint detection rules enabled ? the Set up Unit Tests No ? Setup E2E Tests with Nightwatch? No ? Should WE RUN `npm install` for you at The Project has been the After the Created? (Recommended) npm VUE the -cli · Generated " pack1 " . # Project Installing the Dependencies ... the To GET Started: --------- ------------ here's how to start this service cd pack1 ------------------- cd to the project which npm RUN dev ---- -------------------- run the project
3. Start project
cd into the directory created by the project, first cd pack1 (this is the name of his own construction)
E: \ vuestu> cd pack1 ------------------- cd to the project inside E: \ vuestu \ pack1 > npm RUN dev ---------- -------------- run project
I Your application is running here: http://localhost:8080
Copy the URL to a web page to open after the service starts successfully browser will default to open a "welcome page" on Ok friends.
4. If you are downloading someone else's project, cd into the project but also to others to download and install the project dependencies: npm install, package.json file already exists through the automated build process generates (node_modules) folder, create our own project jump over this step. (Integration: routing module vue-router, a network request module vue-resource, the front end of the frame ElementUI .....)
5. Stop the project
Ctrl + c
6. Packaging Project
npm run build
Reference article: https://www.jianshu.com/p/1626b8643676/
Learn together, the inadequacies of the exhibitions. . . (Next analysis project hierarchy)