vue + elementUI 使用笔记1
1、安装vuevue的安装可移步http://blog.csdn.net/had_meno/article/details/64482602vue init webpack my-testcmd命令行cd my-testnpm installnpm run dev或用VSCode打开项目npm install (或者用cnpm install,速
·
1、安装vue
vue的安装可移步http://blog.csdn.net/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下需要有一个根元素包裹下面的代码,否则会报 Component template should contain exactly one root element的错误<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>
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安装成功
更多推荐
已为社区贡献2条内容
所有评论(0)