Element UI 框架搭建
1、webpack 全局安装
npm install -g webpack
2、淘宝镜像cnpm安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、vue脚手架全局安装 -- 用于生成vue模板
npm install -g vue-cli
4、使用脚手架构建vue项目 -- 一路回车就行了
vue init webpack
目前可用的模板介绍
browserify–全功能的Browserify + vueify,包括热加载,静态检测,单元测试。 browserify-simple–一个简易的Browserify + vueify,以便于快速开始。 webpack–全功能的Webpack + vueify,包括热加载,静态检测,单元测试。 webpack-simple–一个简易的Webpack + vueify,以便于快速开始。
5、element-ui安装
npm i element-ui
6、依赖安装,这里用cnpm安装,因为依赖太多不然,不然让你等的蛋疼 -- 会在项目中生成一个node_modules文件
cnpm install
大功告成,这里可以运行了
npm run dev
vue项目的构建到现在就算完成了,那么现在就引入element-ui组件模块
这里以radio组件为例
1、在\element-ui\src\components\新建个vue组件,组件名为radio
radio组件代码
<template> <el-radio-group v-model="radio2"> <el-radio :label="3">备选项</el-radio> <el-radio :label="6">备选项</el-radio> <el-radio :label="9">备选项</el-radio> </el-radio-group> </template> <script> export default { data () { return { radio2: 3 }; } } </script>
2、在element-ui\src\router.js中设置路由
import radio from ‘@/components/radio‘ //引入刚创建的组件 //设置路由 { path: ‘/radio‘, name: ‘radio‘, component: radio }
3、在\element-ui\src\main.js中加入element-ui的js和css
import ElementUI from ‘element-ui‘ //element-ui的全部组件 import ‘element-ui/lib/theme-chalk/index.css‘//element-ui的css Vue.use(ElementUI) //使用elementUI
大功告成,运行后的效果就是这个样子
总结:在使用初学vue脚手架时很容易出错,搞得很多人包括我自己都摸不着头脑。这里有个教训就是,报错要学会耐心的看调试模式下提示的错误,不懂就去百度,对于英语较为好的这里有比较大的好处,怎么提示错误就怎么解决错误,就是这么简单。
时间: 2024-11-05 18:40:42