How to install vue and element components

This time I will bring you the installation method of vue and element components. What are the precautions for the installation of vue and element components. The following is a practical case, let's take a look.

1. Create a new 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 in node, so directly enter npm-v to view npm version information

2. Some npm resources are blocked or are foreign resources, which often results in failure when using npm to install dependent packages. Therefore, I also need the domestic mirror of npm---cnpm.

3. Enter npm install -g in the command line cnpm--registry=http://registry.npm.taobao.org and then wait for the installation to complete, you can use cnpm to install the dependent packages. Here I will say that it is best to use npm to install. Sometimes cnpm does not download all the dependencies. If npm downloads slowly, you can Try cnpm to install dependent packages.

4. Install the vue-cli scaffolding construction tool. Run the command npm install -g vue-cli on the command line and wait for the installation to complete.

5. Build the project with vue-cli. Select the directory to store the new project

6. In the desktop directory, run the command vue init webpack firstVue in the command line. Explain this command. This command means to initialize a project, in which webpack is the build tool, that is, the entire project is based on webpack. where firstVue is the name of the entire project folder.

7. When running the initialization command, the user will be asked to enter several basic options, such as project name, description, author and other information. If you do not want to fill in the fields, just press Enter to default.

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

9. Install the dependency package (remember to be in the newly created project folder) through the npm install command

10. After installing the dependencies, run the project through npm run dev. The default port is generally 8080. Open the browser and enter localhost:8080

11. If port 8080 is occupied, you need to modify Configuration fileconfig/index.js

2. Introduce Element

1. In the current directory, run: npm i element-ui -S

2. Add code (red) in 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'	//手动变红
import '../node_modules/element-ui/lib/theme-chalk/index.css'	//手动变红
//具体路径有的不同，vue运行报错请看第五点
Vue.config.productionTip = false
/* eslint-disable no-new */
Vue.use(ElementUI)	//手动变红
new Vue({
 el: '#app',
 router,
 template: '<app></app>',
 components: { App }
})

3. Then it can be used directly in the .vue file, such as: make some modifications in src/components/Hello.vue

<template> 
 <p> 
 </p>
<h1 id="msg">{{ msg }}</h1> 
 <h2 id="Essential-Links">Essential Links</h2> 
 <el-button>默认按钮</el-button> 
 <el-button>主要按钮</el-button> 
 <el-button>文字按钮</el-button> 
  
</template> 
 
<script> 
export default { 
 name: &#39;hello&#39;, 
 data () { 
 return { 
 msg: &#39;Welcome to Your Vue.js App&#39; 
 } 
 } 
} 
</script> 
 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style> 
h1, h2 { 
 font-weight: normal; 
} 
ul { 
 list-style-type: none; 
 padding: 0; 
} 
li { 
 display: inline-block; 
 margin: 0 10px; 
} 
a { 
 color: #42b983; 
} 
</style>

I believe you have mastered the method after reading the case in this article , for more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to implement random switching of WeChat IDs in JS

The sub-routes of the bottom navigation bar of vue.js are not Show how to handle

#How to download the Nginx configuration file in sections

The above is the detailed content of How to install vue and element components. For more information, please follow other related articles on the PHP Chinese website!