框架模板element-ui-vue.zip 已经写好的一个小模板,自己npm install 一下就行,只是缺少node_modules文件夹
1. 利用vue脚手架创建项目
2.11版本
> npm i -g vue-cli
> mkdir my-project && cd my-project
> vue init webpack
> npm i && npm i element-ui
启动服务命令:
npm run dev
2.13版本
npm install vue-cli -g //全局安装 vue-cli , 也可以不用这句
vue init webpack element // element 是项目名
npm i element-ui -S // 安装 elementui组件
src 引入elementui --- main.js上修改
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// vue 在脚本中使用elementui
Vue.use(ElementUI)
2. 运行程序
进入项目目录下, 执行命令
npm start
第一个程序
了解VUE-CLI3与2的区别及vue.config.js配置文件
区别是文件的简化
index.js 或者 router.js
详情可以看 使用element框架 增加router路由
import Vue from 'vue'
import Router from 'vue-router'
import Hello from "@/components/Hello";
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
})
安装ElementUI
npm i element-ui -S
使用ElementUI
引入element ui
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import store from "./store"; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); Vue.config.productionTip = false // 令牌 // d5pvv6omk5rgio0tsh3m4xssynwvii45d5ie1f7n15zzt99q /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>', store, })
<template> <div id="app"> <div><img src="./assets/logo.png"></div> <div> <Element_Radio></Element_Radio> </div> <router-view/> </div> </template> <script> import Element_Radio from "./components/Element_Radio"; export default { name: 'App', components: { "Element_Radio": Element_Radio, }, methods: {} } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
<template> <div> <el-radio v-model="radio" label="1">男</el-radio> <el-radio v-model="radio" label="2">女</el-radio> <button @click="radio_click">按钮</button> </div> </template> <script> export default { name: "Element_Redio", data() { return { radio: '1' } }, methods: { radio_click: function () { console.log(this.radio) } } } </script> <style scoped> </style>