vue-cli is an officially released vue.js project scaffolding. Using vue-cli, you can quickly create vue projects. The GitHub address is: https://github.com/vuejs/vue-cli
1. Install node.js
First, you need to install the node environment, you can directly go to the Chinese official website http://nodejs.cn/ to download the installation package.
It's just that the node installed in this way is a fixed version. If you need multiple versions of node, you can use nvm to install http://blog.csdn.net/s8460049/article/details/52396399
After the installation is complete, you can enter node -v and npm -v in the command line tool. If the version number can be displayed, the installation is successful.
2. Install vue-cli
With node installed, we can directly install vue-cli globally:
npm install -g vue-cli
However, this installation method is relatively slow. It is recommended to use domestic mirrors to install , so we first set up cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
If the installation fails, you can use npm cache clean to clean the cache before reinstalling. In the subsequent installation process, if the installation fails, you also need to clear the cache first.
You can also use cnpm -v to see if the installation was successful
Then use cnpm to install vue-cli and webpack
cnpm install -g vue-cli
The latest vue project templates all come with webpack plugins, so you don't have to install webpack here
After the installation is complete, you can use vue -V (note the capital V) to see if the installation was successful.
If it prompts "unrecognized 'vue'", it may be that the npm version is too low, you can use npm install -g npm to update the version
3. Generate the project
First, you need to enter the project directory on the command line, and then enter:
vue init webpack Vue-Project
Where webpack is the template name, you can go to the GitHub of vue.js to see more templates https://github.com/vuejs-templates
Vue-Project is a custom project name. After the command is executed, a project folder named with this name will be generated in the current directory
After the configuration is complete, you can see that there is an additional project folder in the directory, which is a webpack-based vue.js project created by vue-cli
Then enter the project directory (cd Vue-Project) and use cnpm to install dependencies
cnpm install
then start the project
npm run dev
If the page is not loaded after the browser is opened, it may be that the local port 8080 is occupied. You need to modify the configuration file config>index.js
It is recommended to change the port number to a less commonly used port. In addition, I also changed the path prefix of build to ' ./ ' (originally ' / '), because after packaging, when js and css files are imported externally, if the path starts with ' / ', the corresponding files cannot be found locally Yes (no problem on the server). So if you need to open the packaged file locally, you have to modify the file path.
Fourth, packaging and online
Your own project files need to be placed in the src folder
After the project is developed, you can enter npm run build to package it
npm run build
After the packaging is completed, a dist folder will be generated. If the file path has been modified, you can directly open the local file to view it.
When the project is online, you only need to put the dist folder on the server.