vue + elementUI 使用笔记1

1、安装vue

vue的安装可移步http://blog.youkuaiyun.com/had_meno/article/details/64482602

vue init webpack my-test

cmd命令行

cd my-test

npm install

npm run dev

或用VSCode打开项目

npm install (或者用cnpm install，速度更快，不过容易丢包)

npm run build (编译)

npm run dev (启动开发模式)

注：可在package.json中查看build/dev

2、安装并引入elementUI

安装element-ui

npm install element-ui --save-dev (安装element-ui并自动更新package.json)

在main.js引入element-ui

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

3、运行

做一个test小案例查看element-UI是否引入成功

Test1.vue

<template>
    <div>
        <el-radio class="radio" v-model="radio" label="1">备选项</el-radio>
        <el-radio class="radio" v-model="radio" label="2">备选项</el-radio>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
</script>

注：template下需要有一个根元素包裹下面的代码，否则会报 Component template should contain exactly one root element的错误

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Test1 from '@/components/Test1'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/Test1',
      name: 'Test1',
      component: Test1
    }
  ]
})

npm run build,npm run dev 运行可得到以下：

element-Ui安装成功