1. Install the node.js environment
Download the 32-bit or 64-bit installation package according to your needs - go to the node.js official website
https://nodejs.org/en/
Check if the installation is successful
cmd -》
node -v view node
npm -v view npm
If the version numbers of node and npm are displayed, the installation is successful
2 , Amso vue\vue-cli
#Globally install vue-cli scaffolding
npm intall --global vue-cli
The result of successful installation is as follows
Check if vue is installed: vue --version
3. Create a webpack project - input under cmd
#Create a new project based on the webpack template
vue init webpack my-project (my-project is the name of the created project)
There will be some configuration information to choose during the installation process
Project nameEnter the project name
Project description Description
Install vue-router? You can enter Y to confirm or install it later, choose at will
Use ESLint to lint your code? This is for code detection and used to unify the style. Now we use it in our projects. Determine whether to use it according to your needs, Y/N
In addition to the above few others with Y/N prompts, enter N without direct carriage return
The installation is successful as shown below:
cd my-project
npm install
# run the project
npm run dev
The operation is successful as shown in the figure below:
At this point, you can open the browser and enter http://localhost:8080
If successful, you will see the following page
The above successfully created a vue+webpack project
Recommended front-end development tools: webstorm or VS code
The following are the plugins that may be used in the project:
1. Install the route (if you choose Y when creating, you don’t need to install it again)
npm install vue-router --save-dev
2. Install axios cross-domain request (instead of ajax for data request)
npm install axios
3. vuex (state management --- used to process shared data)
npm install vuex --save
4. babel- polyfill ( es6 syntax fallback, used to be compatible with IE )
npm install --save-dev babel-polyfill
5. element (the front-end framework currently adopted by the project)
npm i element-ui -S
6. echarts (make charts, line charts, histograms, pie charts)
npm install echarts --save
7. clean-webpack-plugin (clear duplicate files in the dist folder, used when packaging)
npm install --save-dev clean-webpack-plugin
8. Project packaging
npm run build