Vue入門10 vue+elementUI

2021-02-20 因為我只是一隻小貓咪

十二、實戰快速上手

我們採用實戰教學模式並結合ElementUI組件庫，將所需知識點應用到實際中，以最快速度帶領大家掌握Vue的使用；

ElementUI：https://element.eleme.cn/#/zh-CN/component/installation

npm安裝推薦使用npm的方式安裝，它能更好地和webpack打包工具配合使用。npm i element-ui -S
CDN目前可以通過unpkg.com/element-ui獲取到最新版本的資源，在頁面上會js和css文件即可開始使用。<!-- 引入樣式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入組件庫 --><script src="https://unpkg.com/element-ui/lib/index.js"></script>
通過CDN的方式我們可以很容易地使用Element寫出一個Hello world頁面。
<!DOCTYPE html><html><head>  <meta charset="UTF-8">    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body>  <div id="app">    <el-button @click="visible = true">Button</el-button>    <el-dialog :visible.sync="visible" title="Hello world">      <p>Try Element</p>    </el-dialog>  </div></body>    <script src="https://unpkg.com/vue/dist/vue.js"></script>    <script src="https://unpkg.com/element-ui/lib/index.js"></script>  <script>    new Vue({      el: '#app',      data: function() {        return { visible: false }      }    })</script></html>
國際化Element組件內部替代使用中文，若希望使用其他語言，則需要進行多語言設置。以英語為例，在main.js中：
import Vue from 'vue'import ElementUI from 'element-ui'import locale from 'element-ui/lib/locale/lang/en'
Vue.use(ElementUI, { locale })
12.1、創建工程
注意：命令行都要使用管理員模式運行
1、創建一個名為hello-vue的工程vue init webpack hello-vue
2、安裝依賴， 我們需要安裝vue-router、element-ui、sass-loader和node-sass四個插件
cd hello-vuenpm install vue-router --save-devnpm i element-ui -Snpm installcnpm install sass-loader node-sass --save-devnpm run dev
啟動測試
3、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為該命令的縮寫
12.2、創建登錄頁面把沒有用的初始化東西刪掉！
  在源碼目錄中創建如下結構：
assets：用於存放資源文件
components：用於存放Vue功能組件
views：用於存放Vue視圖組件
router：用於存放vue-router配置
創建首頁視圖，在views目錄下創建一個名為Main.vue的視圖組件：
<template>  <div>首頁</div></template><script>  export default {      name:"Main"  }</script><style scoped></style>
創建登錄頁視圖在views目錄下創建名為Login.vue的視圖組件，其中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="dialogVisiable" 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:''                },                                rules:{                    username:[                        {required:true,message:"帳號不可為空",trigger:"blur"}                    ],                    password:[                        {required:true,message:"密碼不可為空",tigger:"blur"}                    ]                },
                                dialogVisible:false            }        },        methods:{            onSubmit(formName){                                this.$refs[formName].validate((valid)=>{                    if(valid){                                                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的vue-router路由配置文件
import Vue from 'vue';import Router from 'vue-router';import Main from "../views/Main";import Login from "../views/Login";Vue.use(Router);export default new Router({  routes:[    {      path:'/login',      component:Login    },    {      path: '/main',      component: Main    }  ]});
APP.vue
<template>  <div id="app">    <router-link to="/login">login</router-link>  <router-view></router-view>  </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;  text-align: center;  color: #2c3e50;  margin-top: 60px;}</style>
main.js
import Vue from 'vue'import App from './App'import  router from './router'
import Element from 'element-ui'import locale from 'element-ui/lib/locale/lang/en'Vue.config.productionTip = false;Vue.use(ElementUI);Vue.use(router);new Vue({  el: '#app',  router,  render:h=>h(App)});
測試：在瀏覽器打開 http://localhost:8080/#/login
如果出現錯誤: 可能是因為sass-loader的版本過高導致的編譯錯誤，當前最高版本是8.0.2，需要退回到7.3.1 ；
去package.json文件裡面的 "sass-loader"的版本更換成7.3.1，然後重新cnpm install就可以了；
報錯
---上面是原視頻和百度到的大部分的方法，但是我的沒有解決，不知道為什麼，改了大半天，用下面的代碼解決的
npm install --save-dev node-sass sass-loader@6.0.7