從零搭建本身的Vue管理端框架（二）

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成功引入

項目地址

gitee.com/beany/myVue

github.com/MyBeany/myV…

寫文章不易，如對您有幫助，請幫忙點下star

結尾

搭建Vue腳手架和整合ElementUI已完成，後續功能接下來陸續更新，有問題能夠聯繫我mr_beany@163.com。另求各路大神指點，感謝你們。