[vue]element-ui使用

element-ui使用

1. 创建项目

   vue init webpack hello-vue
   cd hello-vue
   npm install vue-router --save-dev
   npm i element-ui -S		//element-ui
   npm install		//安装依赖
   npm install sass-loader node-sass --save-dev	//安装sass加载器
   npm run dev		//测试
   

   • npm install moduleName：安装模块到项目目录下
   • npm install -g moduleName：-g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置
   • npm install -save moduleName：--save 的意思是将模块安装到项目目录下，并在 package 文件的 dependencies 节点写入依赖，-S 为该命令的缩写
   • npm install -save-dev moduleName：--save-dev 的意思是将模块安装到项目目录下，并在 package 文件的 devDependencies 节点写入依赖，-D 为该命令的缩写

2. 初始化

   • assets：用于存放资源文件
   • components：用于存放 Vue 功能组件
   • views：用于存放 Vue 视图组件
   • router：用于存放 vue-router 配置

3. views文件夹

   Main.vue

   <template>
     <div>
       <el-container>
         <el-aside width="200px">
           <el-menu :default-openeds="['1']">
             <el-submenu index="1">
               <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
               <el-menu-item-group>
                 <el-menu-item index="1-1">
                   <router-link to="/user/profile">个人信息</router-link>
                 </el-menu-item>
                 <el-menu-item index="1-2">
                   <router-link to="/user/list">用户列表</router-link>
                 </el-menu-item>
               </el-menu-item-group>
             </el-submenu>
             <el-submenu index="2">
               <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
               <el-menu-item-group>
                 <el-menu-item index="2-1">分类管理</el-menu-item>
                 <el-menu-item index="2-2">内容列表</el-menu-item>
               </el-menu-item-group>
             </el-submenu>
           </el-menu>
         </el-aside>
   
         <el-container>
           <el-header style="text-align: right; font-size: 12px">
             <el-dropdown>
               <i class="el-icon-setting" style="margin-right: 15px"></i>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item>个人信息</el-dropdown-item>
                 <el-dropdown-item>退出登录</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </el-header>
   
           <el-main>
             <router-view />
           </el-main>
         </el-container>
       </el-container>
     </div>
   </template>
   
   <script>
     export default {
       name: "Main"
     }
   </script>
   
   <style scoped lang="scss">
     .el-header {
       background-color: #f9a2c9;
       color: #333;
       line-height: 60px;
     }
   
     .el-aside {
       color: #333;
     }
   </style>
   

   Login.vue

   <template>
     <div>
       <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
         <h3 class="login-title">欢迎登录</h3>
         <el-form-item label="账号" prop="username">
           <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
         </el-form-item>
         <el-form-item label="密码" prop="password">
           <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
         </el-form-item>
       </el-form>
   
       <el-dialog
         title="温馨提示"
         :visible.sync="dialogVisible"
         width="30%"
         :before-close="handleClose">
         <span>请输入账号和密码</span>
         <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
         </span>
       </el-dialog>
     </div>
   </template>
   
   <script>
     export default {
       name: "Login",
       data() {
         return {
           form: {
             username: '',
             password: ''
           },
   
           // 表单验证，需要在 el-form-item 元素中增加 prop 属性
           rules: {
             username: [
               {required: true, message: '账号不可为空', trigger: 'blur'}
             ],
             password: [
               {required: true, message: '密码不可为空', trigger: 'blur'}
             ]
           },
   
           // 对话框显示和隐藏
           dialogVisible: false
         }
       },
       methods: {
         onSubmit(formName) {
           // 为表单绑定验证功能
           this.$refs[formName].validate((valid) => {
             if (valid) {
               // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
               this.$router.push("/main");
             } else {
               this.dialogVisible = true;
               return false;
             }
           });
         }
       }
     }
   </script>
   
   <style lang="scss" scoped>
     .login-box {
       border: 1px solid #DCDFE6;
       width: 350px;
       margin: 180px auto;
       padding: 35px 35px 15px 35px;
       border-radius: 5px;
       -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
       box-shadow: 0 0 25px #909399;
     }
   
     .login-title {
       text-align: center;
       margin: 0 auto 40px auto;
       color: #303133;
     }
   </style>
   

4. router文件夹

   index.js

   import Vue from 'vue'
   import Router from 'vue-router'
   import Main from '../views/Main'
   import Login from '../views/Login'
   import UserProfile from '../views/user/Profile'
   import UserList from '../views/user/List'
   
   Vue.use(Router);
   
   export default new Router({
     routes: [
       {
         path: '/main',
         component: Main,
         //嵌套路由
         children: [
           {
             path: '/user/Profile',
             component: UserProfile
           },
           {
             path: '/user/List',
             component: UserList
           },
         ]
   
       },
       {
         path: '/login',
         component: Login
       },
     ]
   })
   

5. main.js

   import Vue from 'vue'
   import App from './App'
   import router from './router'
   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   
   Vue.use(router);
   Vue.use(ElementUI);
   
   Vue.config.productionTip = false
   
   new Vue({
     el: '#app',
     router,
     render: h => h(App)  //ElementUI
   })
   

6. App.vue

   <template>
     <div id="app">
       <router-link to="/main">首页</router-link>
       <router-link to="/login">登录</router-link>
       <router-view></router-view>
     </div>
   </template>
   
   <script>
   
   export default {
     name: 'App'
   }
   </script>
   

7. 遇到的错误

   Module build failed: TypeError: this.getResolve is not a function
   at Object.loader

   出现原因:当前sass的版本太高，webpack编译时出现了错误

   解决:把package.json里的"sass-loader"设为 "^7.3.1",再重新npm install即可

8. 路由嵌套

   在views下新建user文件夹

   Profile.vue

   <template>
     <h1>用户信息</h1>
   </template>
   
   <script>
       export default {
           name: "Profile"
       }
   </script>
   
   <style scoped>
   
   </style>
   

   List.vue

   <template>
       <h1>用户列表</h1>
   </template>
   
   <script>
       export default {
           name: "List"
       }
   </script>
   
   <style scoped>
   
   </style>