Building project engineering with vue-cli, commands executed and related issues encountered
1. Download and install node#
Test if the installation was successful,
$ node -v
// Returns the downloaded version number
2. Install webpack environment#
$ npm install webpack -g
// If it fails, it may be because the user does not have permission
// Use the following command with administrator privileges
$ sudo npm install webpack -g
If the version number is returned, it means the installation was successful. If not, enter the following command
$ npm install webpack webpack-cli -g
Starting from webpack 4.X, you need to install the webpack-cli dependency
3. Install vue-cli globally#
$ npm install --global vue-cli
// If it fails, use sudo
$ sudo npm install --global vue-cli
After the installation is complete, enter
$ vue -V
If the version number is returned, it means the installation was successful
4. Build the project#
After executing the previous commands, you can build the ci project. Find the folder where you want to place the project, enter the terminal, and cd to this folder
Enter the command:
$ vue init webpack vuedemo
// Name it according to the requirements, vuedemo
- Project name (vuedomo): ----- Project name, just press enter, according to the default name in parentheses (note that the name cannot contain capital letters, if it does, an error will occur: Sorry, name can no longer contain capital letters)
- Project description (A Vue.js project): ---- Project description, you can also just press enter to use the default name
- Author (): ---- Author, enter your name
- Runtime + Compiler: recommended for most users: Since it is recommended, choose it
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere: Choose the first option since it is already recommended - Install vue-router? (Y/n): Whether to install vue-router, this is the official router, which is used in most cases, so enter "y" and press enter.
- Use ESLint to lint your code? (Y/n): Whether to use ESLint to manage the code, ESLint is a code style management tool used to unify code style, which is generally used in projects.
- The next question is a multiple-choice question: Pick an ESLint preset (Use arrow keys): Choose an ESLint preset, which is the code style when writing Vue projects, just press "y" and enter.
- Setup unit tests with Karma + Mocha? (Y/n): Whether to install unit tests, I choose to install, so enter "y" and press enter.
- Setup e2e tests with Nightwatch(Y/n)? Whether to install e2e tests, I choose to install, so enter "y" and press enter.
Then comes the slow build process. When the build is complete, cd into the built project
$ cd vuedemo
Then install the required dependencies
$ npm install
5. Run the project#
Run the command to see if the project can run successfully
$ npm run dev
According to the prompt, enter http://localhost:8080 in the browser
If the port cannot be opened, it may be because it is already in use. You need to modify the configuration file, config > index.js
View project engineering directory
6. Others#
Some other related commands
$ npm run build
// Package the project after completion
After the packaging is complete, a dist folder will be generated in the root directory. You need to modify the path in the configuration file to view it locally.
For project deployment, simply upload the dist folder to the server.