Vue installation and element installation method, vueelement

Vue installation and element installation method, vueelement

1. Create a vue Project

1. First, you need to download nodejs. After installation, open the command window and use the npm package management tool.

Npm is integrated into node, so you can directly enter npm-v to view npm version information.

2. npm: some resources are blocked or foreign resources may often fail to be installed when npm is used. All domestic npm images --- cnpm are required.

3. In the command line, enter npm install-g cnpm -- registry = http://registry.npm.taobao.org and wait until the installation is complete. Then you can use cnpm to install the dependency package. It is better to use npm to install it here, the cnpm dependency download is incomplete sometimes. If the npm download is slow, you can try to install the dependency package in cnpm.

4. Install the vue-cli scaffolding build tool. Run the command npm install-g vue-cli in the command line and wait until the installation is complete.

5. Use vue-cli to build a project. Select a directory to store the new project

6. In the desktop directory, run the command vue init webpack firstVue in the command line. This command initializes a project, where webpack is a build tool, that is, the entire project is based on webpack. FirstVue is the name of the entire project folder.

7. When running the initialization command, the user is asked to enter several basic options, such as the project name, description, and author. If you do not want to enter the parameter, press Enter.

8. Open the firstVue folder. The project file is as follows.

9. install the dependency package (remember to go to the new project folder directory) and run the npm install command

10. After the dependency is installed, run the project through npm run dev. The default value is port 8080. Open the browser and enter localhost: 8080.

11. If port 8080 is occupied, modify the configuration file config/index. js.

After the port is changed, it is shown as follows:

Ii. Introduce Element below

1. Run npm I element-ui-S in the current directory.

2. Add code (red) to src/main. js)

// The Vue build version to load with the 'import' command // (runtime-only or standalone) has been set in webpack. base. conf with an alias. import Vue from 'vue 'import App from '. /App 'import router from '. /router 'import ElementUI from 'element-Ui' // manually red import '.. /node_modules/element-ui/lib/theme-chalk/index.css '// The path varies manually. For details about vue running errors, see Vue. config. productionTip = false/* eslint-disable no-new */Vue. use (ElementUI) // new Vue ({el: '# app', router, template:' <app/> ', components: {App }})

3. You can use it directly in the. vue file, for example, modify src/components/Hello. vue.

<Template> <div class = "hello"> 

4. Run again

On the 5th page, when the 3rd node is used, an error will be reported. The first is whether the elemelement-uiindex.css path is correct, and the second is that the file cannot be found. You need to add a piece of code in the build/webpack. base. conf. js file.

6. Now it is running.

The Installation Method of the above vue and element components is all the content shared by Alibaba Cloud. I hope you can provide a reference and support for the customer's house.