Vue uses vue-cli to build a project, vuevue-cli

Vue uses vue-cli to build a project, vuevue-cli

Vue-cli is an official release of the vue. js project scaffolding, using vue-cli can quickly create a vue project, GitHub address is: https://github.com/vuejs/vue-cli

1. Install node. js

First, you need to install the node environment. You can download the installation package at http://nodejs.cn.

After the installation is complete, enter node-v and npm-v in the command line tool. If the current number is displayed, the installation is successful.

Ii. Install vue-cli

After the node is installed, we can directly install vue-cli globally:

npm install -g vue-cli

However, this installation method is relatively slow. We recommend that you use a domestic image for installation. Therefore, set cnpm first:

npm install -g cnpm --registry=https://registry.npm.taobao.org

If the installation fails, you can use npm cache clean to clear the cache and reinstall it. In the subsequent installation process, if the installation fails, you also need to clear the cache first.

You can also use cnpm-v to check whether the installation is successful.

Then use cnpm to install vue-cli and webpack

cnpm install -g vue-cli

All the latest vue project templates contain the webpack plugin. Therefore, you can choose not to install webpack here.

After the installation is complete, you can use vue-V (note V in upper case) to check whether the installation is successful.

If the message "cannot identify 'vue '" appears, it may be that the npm version is too low. You can use npm install-g npm to update the version.

3. Generate a project

First, enter the project directory in the command line, and then enter:

vue init webpack Vue-Project

Where webpack is the Template Name, you can go to vue. js GitHub to view more template https://github.com/vuejs-templates

Vue-Project is a custom Project name. After the command is executed, a Project folder named after this name is generated in the current directory.

After the configuration, you can see that there is an additional project folder under the Directory, which is a webpack-based vue. js project created by vue-cli.

Then go to the Project directory (cd Vue-Project) and use cnpm to install the dependency

cnpm install

Then start the project

npm run dev

If the page is not loaded after the browser is opened, the local port 8080 may be occupied. You need to modify the configuration file config> index. js.

 

We recommend that you change the port number to an uncommon port. In addition, I also changed the build path prefix '. /'(originally'/') is because after packaging, when js and css files are introduced externally, if the path starts, the corresponding file cannot be found locally (no problem on the server ). Therefore, if you need to open the packaged file locally, you must modify the file path.

4. Package and launch

All your project files must be placed in the src folder.

After the project is developed, you can enter npm run build for packaging.

npm run build

After packaging, the dist folder is generated. If you have modified the file path, you can directly open the local file to view

When the project goes online, you only need to put the dist folder on the server.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.