从零搭建本身的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。另求各路大神指点，感谢你们。