vue + elementUI 使用笔记1
来源:互联网 发布:省市区数据库 编辑:程序博客网 时间:2024/06/06 19:08
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 { 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安装成功
阅读全文
0 0
- vue + elementUI 使用笔记1
- Vue中使用ElementUI使用第三方图标库iconfont
- 使用vue+elementUI编写运营活动生成工具
- vue使用ElementUI时导航栏默认展开
- 使用ES6+vue+elementui+webpack搭建简单项目
- WebStorm Vue ElementUI
- vue结合elementUI,MinUi
- VUE+elementUI分页
- vue-elementUI 弹出框
- vue + elementui filter过滤器
- vue+elementUi时间控件
- vue中引入elementui
- vue + elementui 新手入门案例
- vue-引入 ElementUI
- vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
- Vue中引入ElementUI库
- Vue中引入ElementUI库
- vue elementUI webpack 前端坑;
- Java生成图片验证码
- Win7(64Bit) 安装 PL/SQL Developer图解
- Java基于Cookie的单点登录(SSO)实现
- 032-Java-023
- YOLO2详解
- vue + elementUI 使用笔记1
- oracle字段拼接
- Flutter实战一Flutter聊天应用(五)
- c3p0在javaWeb中的操作
- 用for循环实现九九乘法表
- Ubuntu Server 16.04 通过win10 SSH远程控制
- 007--swift基础语法(字符串)
- js瀑布流小demo
- 【剑指offer-解题系列(46)】扑克牌顺子