vue + elementUI 使用笔记1
2017-06-08 16:34
666 查看
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>
<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 {
ra
4000
dio: '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安装成功
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>
<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 {
ra
4000
dio: '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安装成功
相关文章推荐
- 使用Vue.js和Element-UI做一个简单登录页面的实例
- 在vue项目中使用element-ui的Upload上传组件
- vue2.0 使用element-ui里的upload组件实现图片预览效果
- vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程
- vue2.0 使用element-ui里的upload组件实现多图上传。采用FORMDATA的方式上传。
- 使用Vue.js和Element-UI做一个简单的登录页面
- 使用ES6+vue+elementui+webpack搭建简单项目
- vue使用element-ui的el-input监听不了回车事件
- webpack+vue 在使用element-ui时import 'element-ui/lib/theme-chalk/index.css‘失败
- 在vue项目中使用element-ui的Upload上传组件的示例
- net MVC +Vue.js+Element UI 笔记
- VUE 使用新版本 element-ui 组件库 Select 组件时, value 值为对象时的 BUG 处理
- laravel5.4+vue+element-ui配置及简单使用
- vue使用element-ui的el-input监听不了回车事件的解决方法
- vue使用element-ui的el-input监听不了回车事件解决
- 在vue中使用Element-UI
- 浅谈使用element ui + vuedraggable + sortablejs实现多种版式布局及托拽(1)
- 浅谈使用element ui + vuedraggable + sortablejs实现多种版式布局及托拽(2)
- 使用 vue-cli + element-ui 快速搭建项目
- vue使用element-ui的el-input监听不了回车事件解决