Vue3配置

1.Path

npm install @types/node --save-dev

npm i sass-loader sass -d

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

vite.config.js

const resolve = (dir: string) => path.join(__dirname, dir)

export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve('src'),
'comps': resolve('src/components'),
'apis': resolve('src/apis'),
'views': resolve('src/views'),
'utils': resolve('src/utils'),
'routes': resolve('src/routes'),
'styles': resolve('src/styles')
}
},
})

• 在tsconfig.node.json文件中
• 添加"allowSyntheticDefaultImports": true
• 
• 在tsconfig.json文件中
• 添加

•  "paths": {
        "@":["./src"],
        "@/*":["./src/*"] //添加类别名
      }

   

2.Axios跨越

实现跨域共3个步骤：

1，vue3.0根目录下创建vue.config.js文件；

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'https://you.163.com/', //接口域名
                changeOrigin: true,             //是否跨域
                ws: true,                       //是否代理 websockets
                secure: true,                   //是否https接口
                pathRewrite: {                  //路径重置
                    '^/api': ''
                }
            }
        }
    }
};

2，将上述代码块写入其中；

如图：

3，将api接口放入请求的url中；

使用页面的代码块：

<template>
    <div>
        <H1>TEST</H1>
        <p>{{data}}</p>
    </div>
</template>
 
<script>
    import axis from 'axios';
    export default {
        name: 'Test',
        data() {
            return {
                data: {},
            };
        },
        methods: {
            getData() {
                axis.get('/api/xhr/search/queryHotKeyWord.json')//axis后面的.get可以省略；
                    .then(
                        (response) => {
                            console.log(response);
                            this.data = response;
                        })
                    .catch(
                        (error) => {
                            console.log(error);
                });
            },
        },
        mounted() {
            this.getData();
        },
    };
</script>
 
<style scoped>
 
</style>

代码解析：

浏览器页面：

剩下的就是把数据渲染到页面了。

 

实际示例

vue3 8080端口请求flask8081端口服务数据：

module.exports = {
    devServer: {
        host: '0.0.0.0',
        port: 8080,
        open: true,
        proxy: {
            '/api/testcase/': {
                target: 'http://127.0.0.1:8081/', //接口域名
                changeOrigin: true,             //是否跨域
                ws: true,                       //是否代理 websockets
                secure: true,                   //是否https接口
                pathRewrite: {                  //路径重置
                    '^/api/testcase/': '/api/testcase/'
                }
            }
        },
    },
}

axis.get('/api/testcase/')//axis后面的.get可以省略；
                        .then(
                            (response) => {
                                console.log(response);
                                this.totaltableData = response.data['result'];
                            })
                        .catch(
                            (error) => {
                                console.log(error);
                    });

flask接口地址:

# http://127.0.0.1:8081/api/testcase/
@app.route('/api/testcase/')
def alltestcase():
    pass

 3.Router

npm i vue-router@next

index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";


const routes: Array<RouteRecordRaw> = [
    {
        path:'/',
        component:()=>import('@/components/testhome.vue')

    }
]

const router = createRouter({
    history:createWebHashHistory(),
    routes:routes
})

export default router

 main.ts

import { createApp } from 'vue'
import App from './App.vue'

import router from './router'

const app = createApp(App)




app.use(router)

app.mount('#app')

 4.Vuex4

npm i vuex@next

index.ts

import { createStore } from "vuex";

interface State{
    count:number
}

const store = createStore<State>({
    state(){
        return{
            count:0
        }
    },
    mutations:{
        increment(state){
            state.count++
        }
    }
})

export default store

test.vue

<template lang="">
    <div>
        测试一下
        <button @click="increment">{{count}}</button>
    </div>
</template>
<script setup>
    import { ref, computed } from 'vue'
    import { useStore } from 'vuex'
    const store = useStore();

    const count = computed(() => {  
        return store.state.count
    })
    const increment = () => {
        store.commit('increment')
    }

</script>
<style lang="">

</style>

 5.element-plus

npm install element-plus --save

完整引入#

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// main.ts

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

 

 

按需导入#

您需要使用额外的插件来导入要使用的组件。

自动导入 推荐#

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

 

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

Vite#

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    // ...

      AutoImport({

      imports: ["vue", "vue-router"], // 自动导入vue和vue-router相关函数

      resolvers: [ElementPlusResolver()],

    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

 

Volar 支持#

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

// tsconfig.json

{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

 

 "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "auto-imports.d.ts",
    "components.d.ts"
  ],

　　

Webpack#

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

6.启动后，不能够用ip地址访问，只能用localhost

启动后，不能够用ip地址访问，只能用localhost
启动指令添加 '--host' 配置即可。

 "dev": "vite --host" 

7.sass

npm i sass-loader sass -d

 vite.config.ts

  css:{
    preprocessorOptions:{
      scss:{
        additionalData:`@import "./src/sytle/variables.scss";`,
      }
    }

  },

 8.判断是否移动设备

isMoblie.ts

export const isMoblie = () => {
    let flag = navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)
    return flag

}

 9.pinia（大菠萝）

npm install pinia

// 容器钩子
import { defineStore } from "pinia";

export const useCounterStore = defineStore('count', {
    // 创建state
    state: () => ({
        count: 0,
        msg: 'hello,world',
        ary: [1, 2, 3,],

    }),
    // 计算
    getters: {
        doubleCount(state): number {
            return state.count * 2
            // return this.count * 2
        },
        OneCount(): number {
            return this.doubleCount + 1
        }

    },
    // 方法
    actions: {
        change() {
            this.count += 2;
            this.msg = "哈哈哈"
        }

    }
})

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'

import router from './router'


const app = createApp(App)

app.use(createPinia())
app.use(router)
app.mount('#app')