1.安装node.js
http://nodejs.cn/download/
在cscode终端/cmd中输入 node -v查安装好的版本号
2.安装cnpm(npm的镜像)
https://npmmirror.com/
3.安装yarn
npm install yarn
4.安装vue-cli脚手架
cnpm install -g@vue/cli@版本号
验证是否安装成功: vue -V查版本号
5.vue create 项目名(小写字母)
6.引入element-ui
npm i element-ui -S
打包项目:npm run build
6.1. 全局引入
//在 main.js 中写入以下内容:
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
6.2 按需引入
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。首先,安装 babel-plugin-component:
npm install babel-plugin-component -D
//在babel.config.js文件中添加以下信息
{
//"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
7.引入vue-router@3.2.0
npm i vue-router@
8.设置路由
在根目录创建两个文件夹及三个文件
router/index.js
views/HomeIndex.vue
views/UserIndex.vue
在App.vue中添加组件<router-view
附件
//babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
//main.js
import Vue from 'vue'
import App from './App.vue'
import {Button} from 'element-ui';//按需引入
import {Radio} from 'element-ui';//按需引入
// import ElementUI from 'element-ui';全局引入
import 'element-ui/lib/theme-chalk/index.css';
import router from '../router'
Vue.config.productionTip = false
Vue.use(Button)//按需引入
Vue.use(Radio)//按需引入
// Vue.use(ElementUI)全局引入
new Vue({
router,
render: h => h(App),
}).$mount('#app')
//app.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<router-view></router-view>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
//HelloWorld.vue
<template>
<div class="hello">
<router-link to="/homeIndex">
<el-button>按钮</el-button>
</router-link>
<router-link to="/userIndex">
<el-button type="primary">主要按钮</el-button>
</router-link>
<!-- <el-radio v-model="radio" label="1">备选项</el-radio> -->
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
//HomeIndex
<template lang="">
<div>我是Home页面</div>
</template>
<script>
export default {
name:'HomeIndex',
data(){
return {}
}
}
</script>
<style lang="">
</style>
//UserIndex
<template lang="">
<div>我是User页面</div>
</template>
<script>
export default {
name:'UserIndex',
data(){
return {}
}
}
</script>
<style lang="">
</style>
//index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.config.productionTip = false
const routes=[
{
path:'/homeIndex',
name:'HomeIndex',
component:()=>import('../views/HomeIndex.vue')
},
{
path:'/userIndex',
name:'UserIndex',
component:()=>import('../views/UserIndex.vue')
}
]
const router=new VueRouter({
mode:'history',
routes
})
export default router