Vue(17) —— vue实战快速上手:vue+elementUI

---

    咱们采用实战教学模式并结合 ElementUI 组件库，将所需知识点应用到实际中，以最快速度带领你们掌握 Vue 的使用
    下面我们将学习的vue知识点、创建vue工程都串起来回顾一遍
    上面的目录其实就是我们开发vue项目的4个大步骤

---

1.创建vue项目结构

• 建立一个名为 hello-vue 的工程 vue init webpack hello-vue
  
  

• 安装依赖，咱们须要安装 vue-router、element-ui、sass-loader 和 node-sass 四个插件

  # 1.进入工程目录
  cd hello-vue
  # 2.安装 vue-router
  npm install vue-router --save-dev
  # 3.安装 element-ui
  npm i element-ui -S
  # 4.安装依赖
  npm install
  # 5.安装 SASS 加载器
  cnpm install sass-loader node-sass --save-dev
  # 6.启动测试
  npm run dev
  

• Npm命令解释：

  • 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.使用IDEA打开项目

• 打开项目第一件事就是删除不需要的文件，一般就是删除这个项目模板中components文件夹下的HelloWorld.vue和assets文件夹下的logo.png
• 然后清除App.vue文件中对上面两个文件的引用
  
• 创建需要使用的文件的文件夹，首先就是上一篇博客中使用的router文件夹；这里还需要新创建一个views文件夹，这个文件夹其实里面放的还是组件，按照原来应该是放在components文件夹下的，但是就可以将实现视图的组件和实现指定功能的组件分开存放，方便管理
  

---

3.代码编写

• 在views文件夹下面创建一个视图组件，用作这个项目的主页，取名Main.vue

  <template>
    <h2>首页</h2>
  </template>
  
  <script>
  export default {
    name: "Main"
  }
  </script>
  
  <style scoped>
  
  </style>
  

• 在创建一个login.vue的视图组件，具体实现我们就不写了，直接粘贴elementUI上现成的代码，其中 el-* 的元素为 ElementUI 组件；

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

• 此时我们创建了两个子组件，要想用起来就需要配置路由；在router文件夹下创建index.js

  //引入两个类，代码固定
  import Vue from "vue/types/vue";
  import VueRouter from "vue-router";
  
  //引入要使用的组件
  import Main from "../views/Main";
  import Login from "../views/Login";
  
  //将vue类和路由类关联起来，代码固定
  Vue.use(VueRouter);
  
  //new一个路由对象，并配置路由转发策略
  export default new VueRouter({
    routes:[
      {
        path: "/Main",
        component: Main
      },
      {
        path: "/Login",
        component: Login
      }
    ]
  })
  

• 去main.js中导入我们的路由js文件，并将它作为属性配置给全局唯一的vue对象，即为vue对象初始化添加一个router属性

  import Vue from 'vue'
  import App from './App'
  import router from "./router/index"
  
  Vue.config.productionTip = false
  
  new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
  })
  

• 在main.js中配置elementUI组件，这一步需要按照官方文档上说的来使用，所以我们需要按照它的格式来配置main.js
  

  import Vue from 'vue'
  import App from './App'
  
  //导入我们的路由配置js
  import router from "./router/index"
  //导入要使用的elementUI组件
  import ElementUI from 'element-ui';
  //导入使用ElementUI依赖的css文件
  import 'element-ui/lib/theme-chalk/index.css';
  
  Vue.config.productionTip = false
  
  //vue想用这个组件，必须显示的安装vue要用的组件
  Vue.use(router)
  Vue.use(ElementUI)
  
  new Vue({
    el: '#app',
    router,
    render: h => h(App)//ElementUI的使用配置
  })
  

• 去App.vue中使用路由节点实现跳转

  <template>
    <div id="app">
      <router-link to="/login">登陆</router-link>
      <router-view></router-view>
    </div>
  </template>
  
  <script>
  
  export default {
    name: 'App',
    components: {
    }
  }
  </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>
  
  

• 启动项目测试效果
  

如果包下面这个错，是因为package.json里面的sass-loader版本太高了，我装上都10.X.X了，
我们需要手动的降低版本，比如改成7.3.1，在修改之后我们需要执行一遍npm install，
因为我们使用npm install下载的依赖都是写在package.json里面的，现在这个文件内容改动了，
我们想要使用低版本的sass-loader，就只能再重新安装一次里面的包
安装成功之后，webpack就可以正常的打包程序了

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string

---

4.测试

测试完成！