Installation tutorial for using vue and element components (detailed tutorial)

Below I will share with you an article on the installation of vue and the installation of element components. It has a good reference value and I hope it will be helpful to everyone.

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 the version information of npm

2. npm has some resources Being blocked or due to foreign resources often results in failure when installing dependent packages using npm, so I also need npm's domestic mirror ---cnpm.

3. Enter npm install -g cnpm--registry=http://registry.npm.taobao.org in the command line and wait for the installation to complete. You can use cnpm to install dependency packages. Let’s talk about it here. It is best to use npm to install. Sometimes cnpm's dependencies are not fully downloaded. If npm downloads slowly, you can try cnpm to install dependency packages.

4. Install the vue-cli scaffolding building 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 a directory to store the new project

#6. In the desktop directory, run the command vue init webpack firstVue on the command line. Explain this command. This command means to initialize a project, where 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 and default. good.

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

9. Install the dependency package (remember it must be in the newly created project folder), use the npm install command

10. Install the dependency After that, run the project and implement it through npm run dev. Generally, the default is port 8080. Open the browser and enter localhost:8080

##11. If port 8080 is occupied, it needs to be modified. After changing the port, the configuration file config/index.js

# displays like this:

2. The following introduces Element

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

2. Add the code (red)

// 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: &#39;<App/>&#39;,
 components: { App }
})

3 in src/main.js, and then you can use it directly in the .vue file For example: make some changes in src/components/Hello.vue

<template> 
 <p class="hello"> 
 <h1>{{ msg }}</h1> 
 <h2>Essential Links</h2> 
 <el-button>默认按钮</el-button> 
 <el-button type="primary">主要按钮</el-button> 
 <el-button type="text">文字按钮</el-button> 
 </p> 
</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 scoped> 
h1, h2 { 
 font-weight: normal; 
} 
 
ul { 
 list-style-type: none; 
 padding: 0; 
} 
 
li { 
 display: inline-block; 
 margin: 0 10px; 
} 
 
a { 
 color: #42b983; 
} 
</style>

4. Run again

5. The above (3) will sometimes report an error. First, check whether the index.css path of element-ui is correct. Second, because the error will show that the file cannot be found, you need to build Add a piece of code to the /webpack.base.conf.js file as follows.

#6. Now it’s running

The above is what I compiled for you. I hope it will be helpful to everyone in the future.

Related articles:

Angular study notes: examples of integrating third-party UI frameworks and controls

Node.js implementation registration Example of how to activate the email function

Detailed explanation of Webpack’s babel-loader file preprocessor

The above is the detailed content of Installation tutorial for using vue and element components (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!