使用vue-cli和element-ui入门实践
1. 环境配置
安装node
从Node官网下载对应平台的安装程序https://nodejs.org/en/
在window上安装时要注意:选择全部组件,包括勾选Add to Path。
安装完成后,在window环境下,打开命令行窗口,然后输入node -v
,如果安装正常,可以看到输出如图所示:
2. 安装vue-cli
参考文档https://cli.vuejs.org/zh/
npm install -g @vue/cli
目前按照这种方式安装应该是Vue CLI 4.X(需要Node.jsV8.9或更高版本)
2.1 查看Vue cli的所有版本号
vue-cli3.X 和vue-cli4.x所有版本号查看
npm view @vue/cli versions --json
vue-cli1.x和vue-cli2.x的所有版本号查看
npm view vue-cli versions --json
2.2 安装指定版本号的vue-cli
安装3.x和4.x版本(推荐安装这两个版本)
npm install -g @vue/cli@版本号
安装1.x和2.x版本
npm install -g vue-cli@版本号
安装完成后,命令行执行vue -V
,正常输出版本号,则说明安装成功。
3. 项目搭建
3.1 创建一个vue-cli3项目
vue create mmp-subapp1
mmp-subapp1为自定义项目名称,回车之后依次选默认的即可
3.2 使用element-ui组件
-
安装element-ui依赖
npm install element-ui
-
安装sass和sass-loader ,因为element-ui中的样式默认是使用sass来编写的
npm install sass --save-dev npm install sass-loader --save-dev
-
在main.js文件中引入element-ui和样式,添加以下代码即可
import ElementUI from 'element-ui'; //引入ElementUI import 'element-ui/lib/theme-chalk/index.css' //引入element-ui样式 Vue.use(ElementUI)
-
使用elment-ui组件
-
例如在App.vue中:
<template> <div id="app"> <!-- 全局引入的element-ui的组件 --> <el-button>按钮组件</el-button> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; } </style>
-
页面效果
-
3.3 使用自定义组件(以header组件为例)
- components文件夹中添加如下结构文件
-
Index.vue文件中添加头部组件的内容如下
<template> <div class="base-header"> <div class="base-header-logo"> <img src="../../assets/logo.png"/><span >支付模块管理平台</span> </div> <div class="base-header-userInfo"> <div class="base-header-userName">{ {userName}}</div> <span class="base-header-logout-btn" @click="logout">退出登录</span> </div> </div> </template> <script> export default { name:'CusHeader', data() { return { userName: '韦小宝' //要显示的用户名称 } }, methods: { logout() { //退出登录操作 console.log('退出登录') } }, } </script> <style lang="scss" scoped> .base-header { background-color:#001529; height:calc(5vh); color:#fff; .base-header-logo { margin-left:10px; display: inline-block; img { display: inline-block; width: 2.8em; height: 2.8em; vertical-align: middle; } span { font-size:1.5em<