Vue專案入門例項

qch發表於2020-11-03
Vue

　　前言

　　本文記錄Vue2.x + Element-UI + TypeScript語法入門例項

　　為什麼要用TypeScript？

　　1、TypeScript是JavaScript的超集，利用es6語法，實現對js的物件導向程式設計思想；

　　2、TypeScript會像強型別語言一樣，可以避免出現不可預期的執行時bug；

 

　　Vue官網：https://cn.vuejs.org/

　　Element-UI官網：https://element.eleme.cn/#/zh-CN

 

　　Vue對TypeScript的支援：https://cn.vuejs.org/v2/guide/typescript.html

　　TypeScript的學習可以看回我們之前的《typescript》系列：https://www.cnblogs.com/huanzi-qch/category/1509796.html

　　vue+typescript整合，推薦閱讀這篇文章：https://segmentfault.com/a/1190000011744210

 

　　安裝、啟動

　　vue專案需要node環境，開始安裝之前，先安裝node環境，安裝node環境看之前的部落格：TypeScript環境安裝，以及配置idea開發環境

 

　　裝好node環境之後，先安裝Vue CLI手腳架，通過手腳架來快速建立專案

npm install -g @vue/cli

 

　　裝好之後使用命令檢視版本號，確認一下 

vue --version

 

　　裝好了手腳架，然後就可以通過手腳架快速建立portal門戶專案

　　PS：element-ui現在還不支援Vue3，所以我們現在Vue2就可以了，選擇自定義安裝把配置項全都勾上，或者可以先選擇預設安裝

vue create portal

 

　　後續再在package.json裡面指定依賴包，直接使用IDE（或者手敲命令也一樣），執行安裝命令下載依賴包

 

 　　package.json依賴配置

  "dependencies": {
    "core-js": "^3.6.5",
    "register-service-worker": "^1.7.1",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0",
    "axios": "0.21.0",
    "element-ui": "^2.13.2",
    "js-cookie": "2.2.1"
  },

 

　　在src的同級目錄下面，建立vue.config.js配置檔案，配置埠等

module.exports = {
    publicPath: './',
    outputDir: 'dist',
    assetsDir: 'static',
    lintOnSave: true,
    productionSourceMap: false,
    devServer: {
        port: '10010',
        open: false,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            '/auth': {
                target: 'http://localhost:10086',
                secure: false,
                changeOrigin: true,
                pathRewrite: {
                    '^/auth': '/'
                }
            },
            '/api': {
                target: 'http://localhost:10086',
                secure: false,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/'
                }
            }
        }
    }
}

 

　　使用idea開啟專案，配置config，即可在idea執行vue專案

 

　　或者也可以手動輸入命令啟動專案（vue-cli-service serve），或者在package.json檔案中執行指令碼

 

　　啟動成功

 

　　專案結構

 

　　Vue Router

　　Vue Router官網：https://router.vuejs.org/zh/

　　路由配置

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'

Vue.use(VueRouter);

/* 公用模組選單路由 */
const commonRoutes: Array<RouteConfig> = [
    {
        path: '/',
        name: 'Home',
        meta: { title: '主頁' },
        component: () => import( '@/views/Home.vue')
    },
    {
        path: '/404',
        name: '404',
        meta: { title: '404' },
        component: () => import('@/views/common/404.vue')
    },
    { path: '*', redirect: '/404'}
];

/* test模組選單路由 */
const testRoutes: Array<RouteConfig> = [
    {
        path: '/test',
        name: 'Test',
        meta: { title: 'demo測試' },
        component: () => import( '@/views/test/Test.vue')
    }
];

const router = new VueRouter({
  base:"/",
  mode: 'hash',//history   hash
  routes:commonRoutes.concat(testRoutes)
});

router.beforeEach(async(to, from, next) => {
    console.log("跳轉開始，目標："+to.path);
    document.title = `${to.meta.title}`;

    //跳轉頁面
    next();
});

router.afterEach(() => {
    console.log("跳轉結束");

});

export default router

 

　　路由跳轉、頁面接參

/**
 * 工具類
 */
export default class CommonUtil {

    /**
     * 從url中獲取引數
     * 例項：http://xxxxx/index?id=1&name=張三
     * getQueryVariable("id")//1
     * getQueryVariable("name")//張三
     */
    public static getQueryVariable(variable:string): string {
        let vars = window.location.search.substring(1).split("&");
        for (let i = 0; i < vars.length; i++) {
            let pair = vars[i].split("=");
            if (pair[0] === variable) {
                return pair[1];
            }
        }
        return "";
    };
}

 

import CommonUtil from  "@/utils/commonUtil"

//跳轉 params 是路由的一部分,必須要有。query 是拼接在url後面的引數，沒有也沒關係
this.$router.push({name:'Home',
    params: {id:'001'},
    query: {id:'001'}
});

//接參
let id = this.$route.params.id;
//如果為空，嘗試從url中獲取引數
if(!id){
    id = CommonUtil.getQueryVariable("id");
}

　　或者直接在瀏覽器上輸入path路徑，即可跳轉頁面

 

　　Vuex

　　Vuex官網：https://vuex.vuejs.org/zh/

　　vuex配置

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

/*
  約定，元件不允許直接變更屬於 store 例項的 state，而應執行 action 來分發 (dispatch) 事件通知 store 去改變
 */
export default new Vuex.Store({
  state: {
  },
  getters:{
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

 

　　專案入口

　　App.vue

<!-- 這裡是專案路口，配置<router-view/>即可 -->
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script lang="ts">

</script>

<style lang="less">
  html,body{
    margin: 0 !important;
    padding: 0 !important;
  }
</style>

 

　　main.ts

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// @ts-ignore
import locale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(ElementUI, { locale });

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

 

　　TypeScript語法

　　Vue對TypeScript的支援：https://cn.vuejs.org/v2/guide/typescript.html

　　vue+typescript整合，推薦閱讀這篇文章：https://segmentfault.com/a/1190000011744210

　　在使用typescript語法的過程中，我們使用官方維護的 vue-class-component 裝飾器，這裡是它的文件：https://class-component.vuejs.org/

　　這個就是它一個簡單的寫法

<template>
  <div>
    簡單頁面
  </div>
</template>

<script lang="ts">
import { Component,  Vue } from 'vue-property-decorator';

@Component
export default class Home extends Vue {

}
</script>

<style scoped>

</style>

 

　　完整測試例子

　　接下來介紹具體的使用，裡面包含了常用的：data 資料、生命週期鉤子函式、methods 普通方法、computed 獲取/設定計算屬性、watch 監聽、props 元件資料傳遞

　　HelloWorld元件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {

  //props 元件資料傳遞
  @Prop({ type: String,default: 'default value' }) private msg!: string;
}
</script>

<style scoped lang="less">

</style>

 

　　Test.vue測試頁面

<template>
    <div style="padding: 20px;">
        <el-row>
            <el-col :span="12">
                <div style="padding: 20px;">
                    <el-divider content-position="left">資料繫結測試</el-divider>
                    <el-row>
                        <el-input placeholder="請輸入新msg內容" v-model="msg" clearable></el-input>
                        <p>直接繫結data資料：{{msg}}</p>
                        <p>普通方法獲取data資料：{{getMsg()}}</p>
                        <p>computed的get方法獲取data資料：{{computedTest}}</p>
                        <el-button type="primary" plain @click="buttonClick">呼叫computed的set方法修改data資料</el-button>
                    </el-row>

                    <el-divider content-position="left">引用HelloWorld元件測試</el-divider>
                    <el-row>
                        <HelloWorld :msg="msg"/>
                    </el-row>

                    <el-divider content-position="left">if-else條件渲染測試</el-divider>
                    <el-row>
                        <p style="color: green" v-if="flag">if條件渲染：true</p>
                        <p style="color: red" v-else="flag">if條件渲染：false</p>
                        <el-button type="primary" plain @click="flag=!flag">if條件渲染取反</el-button>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="12">
                <div style="padding: 20px;">

                    <el-divider content-position="left">for迴圈-陣列渲染測試</el-divider>
                    <el-row>
                        <p v-for="(item,index) in items">
                            序號：{{index}}，編號：{{item.id}}，姓名：{{item.name}}
                        </p>
                        <el-button type="primary" plain @click="items.push({id:'0000',name:'new item'})">新增記錄</el-button>
                    </el-row>

                    <el-divider content-position="left">for迴圈-物件渲染測試</el-divider>
                    <el-row>
                        <p v-for="(value,key,index) in itemsByObj">
                            序號：{{index}}，{{key}}：{{value}}
                        </p>
                    </el-row>

                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts">
    import { Component, Emit, Watch, Prop, Vue } from 'vue-property-decorator';
    import HelloWorld from '@/components/HelloWorld.vue';

    @Component({
        components: {
            HelloWorld,
        },
    })
    export default class Test extends Vue {
        //data 資料
        private msg:string = "test測試";
        private flag:boolean = true;
        private items:any = [
            {id:1001,name:"張三"},
            {id:1002,name:"李四"},
            {id:1002,name:"王五"},
        ];
        private itemsByObj:object = {
            id:1001,
            name:"huanzi-qch",
            age:18,
            email:"huanzi-qch@qq.com",
            phone:"12345678900",
        };

        //生命週期鉤子函式
        created(){
            console.log("created");
        };
        mounted(){
            console.log("mounted");
        };

        //methods 普通方法
        @Emit()
        getMsg(): string{
            return this.msg;
        }
        @Emit()
        buttonClick(): void{
            this.computedTest = 'test測試0001';
        }

        //computed 獲取/設定計算屬性
        get computedTest(): string{
            return this.msg;
        }
        set computedTest(newMsg:string){
            this.msg = newMsg;
        }

        //watch 監聽
        @Watch('msg')
        onMsgChanged(newVal: string, oldVal: string) {
            this.$message.info("msg值發生改變，舊值：" + oldVal + "，新值：" + newVal);
        }
    }
</script>

<style scoped>

</style>

　　

　　效果演示

 

 

　　環境配置檔案

　　配置檔案的key，要以VUE_APP_開頭

 

　　讀取

<template>
  <div>
    {{adminUrl}}
  </div>
</template>

<script lang="ts">
import { Component,  Vue } from 'vue-property-decorator';

@Component
export default class Home extends Vue {
    //讀取環境配置值
    private adminUrl:string = process.env.VUE_APP_ADMIN_URL;
}
</script>

<style scoped>

</style>

 

　　打包、部署

 　　vue.conifg.js中指定好打包路徑

    publicPath: './',
    outputDir: 'dist',
    assetsDir: 'static',

　　同時，路由配置那裡要注意，模式要改成mode: 'hash'

const router = new VueRouter({
  base:"/",
  mode: 'hash',//history   hash
  routes:commonRoutes.concat(testRoutes,adminRoutes)
});

 

　　直接執行打包指令碼，或者手動輸入命令

 

 

 　　打包成功

 

 

 

　　複製dist資料夾到Tomcat容器，把Tomcat執行起來

 

 

 

　　訪問：http://172.16.35.52:10086/dist/，即可跳轉到我們配置的 / 路徑頁面

 

　　

　　在此路徑基礎上就可以訪問我們配置的路由路徑了，如：http://172.16.35.52:10086/dist/#/test

 

 

 

　　後記

　　Vue專案入門例項就暫時記錄到這，後續再繼續更新

相關文章