使用vue-cli和element-ui快速搭建后台管理系统

使用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组件

1. 安装element-ui依赖

   npm install element-ui
   

2. 安装sass和sass-loader ，因为element-ui中的样式默认是使用sass来编写的

   npm install sass --save-dev
   npm install sass-loader --save-dev
   

3. 在main.js文件中引入element-ui和样式，添加以下代码即可

   import ElementUI from 'element-ui'; //引入ElementUI
   import 'element-ui/lib/theme-chalk/index.css' //引入element-ui样式
   
   Vue.use(ElementUI)
   

4. 使用elment-ui组件

   1. 例如在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>
      

   2. 页面效果

3.3 使用自定义组件(以header组件为例)

1. components文件夹中添加如下结构文件

2. 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<