Hello大家好，本章我們搭建Vue腳手架和整合ElementUI 。有問題可以聯絡我mr_beany@163.com。另求各路大神指點，感謝
一：建立腳手架
建立專案存放目錄：
大家隨便，我這裡放在了 F:\work\mywork
執行cmd命令
vue init webpack myvue 注意：myvue為專案名，隨便起，不能使中文
? Project name myvue
? Project description A Vue.js project
? Author e <mr_beany@163.com>
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
複製程式碼二：安裝依賴
1： cd 命令進入建立的工程目錄，首先cd myvue（這裡是自己建工程的名字）；2： 執行 npm install 如果一直失敗 ，可以執行cnpm install
3：
三：安裝axios
執行 npm install --save axios
axios作用是傳送http請求
四：安裝elementui依賴
執行 npm i element-ui -S
elementui 的api地址 ElementUI
開啟src→main.js
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
複製程式碼開啟src→components→HelloWorld.vue
修改加入如下程式碼
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<!-- <el-radio></el-radio> 標籤為ElementUI 的單選框 -->
<el-radio v-model="radio" label="1">備選項</el-radio>
<el-radio v-model="radio" label="2">備選項</el-radio>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
radio: '1'
}
}
}
</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>
複製程式碼五：目錄結構
五：執行測試
cmd進入專案目錄下，執行 npm run dev
注意：這裡是預設服務啟動的是本地的8080埠，所以請確保你的8080埠不被別的程式所佔用。
瀏覽器輸入 http://localhost:8080
ok，我們可以看到ElementUI成功引入
專案地址
寫文章不易，如對您有幫助，請幫忙點下star
結尾
搭建Vue腳手架和整合ElementUI已完成，後續功能接下來陸續更新，有問題可以聯絡我mr_beany@163.com。另求各路大神指點，感謝大家。