• vite+vue3.0 + TypeScript+element-plus环境搭建

    1、环境要求：node版本16+以上

    2、搭建vite项目

    npm create vite@latest

     

    cmd运行下面命令

    cd vite-project

    npm install

    npm run dev

     

    谷歌浏览器访问http://127.0.0.1:5173/  查看效果

    3、安装element-plus组件

    npm运行以下命令进行安装element-plus

     npm install element-plus -S

     

    在vue的main.ts文件里面，全局引用elementUI

    1. import { createApp } from 'vue'
    2. import './style.css'
    3. import App from './App.vue'
    4. import ElementPlus from 'element-plus'
    5. import 'element-plus/dist/index.css'
    6.  
    7. const app = createApp(App)
    8. app.use(ElementPlus)
    9. app.mount('#app')
    1. <el-row class="mb-4">
    2.     <el-button>Defaultel-button>
    3.     <el-button type="primary">Primaryel-button>
    4.     <el-button type="success">Successel-button>
    5.     <el-button type="info">Infoel-button>
    6.     <el-button type="warning">Warningel-button>
    7.     <el-button type="danger">Dangerel-button>
    8.   el-row>

     

    4、VSCode编辑器扩展调整

     原因： 因为vue3已经不支持vetur插件。

    在扩展里面进行搜索Vetur插件，进行禁用或卸载；

    在 VScode扩展里面搜索并下载对应插件： Vue Language Features (Volar)和TypeScript Vue Plugin (Volar)

    如果提示下载失败，需要手动进行下载；（原因：可能是VScode版本太低，需要升级最新版本，菜单栏-》帮助-》检查更新...）

     

     VScode编辑器设置ref()自动补全.value命令；

     5、调整web端口配置

    1. //vite.config.ts
    2. server: {
    3.     port: 8090,
    4.     open: false,
    5.     proxy: {
    6.       
    7.     },
    8.   },

     6、下载安装其他依赖包

    6.1 安装@types/node，配置@=src目录路径

    npm install @types/node --save-dev 

    在vite.config.ts文件添加配置 

    1. import { resolve } from 'path'
    2. resolve: {
    3.   extensions: [
    4.       ".mjs",
    5.       ".js",
    6.       ".ts",
    7.       ".jsx",
    8.       ".tsx",
    9.       ".json",
    10.       ".vue",
    11.       ".ttf",
    12.     ],
    13.     alias: {
    14.       "@": resolve(__dirname, "./src"),
    15.     }
    16.   },

    在tsconfig.json文件里面添加配置 

    1. "baseUrl": ".",
    2.     "paths": {
    3.       "@/*": ["src/*"]
    4.     }

     6.2 安装sass依赖包

    处理使用css使用lang="scss"报错问题

    npm install sass --save-dev 

    参考资料： https://www.w3cschool.cn/sass/ 

     6.3、安装vue-router

    npm install vue-router@4 

    参考资料： https://router.vuejs.org/zh/installation.html 

    6.4、安装pinia

    npm install pinia 

     

    参考资料： https://pinia.vuejs.org/zh/getting-started.html 

    6.5、安装vuex（可安装）

    Pinia 起源于一次探索 Vuex 下一个迭代的实验，因此结合了 Vuex 5 核心团队讨论中的许多想法。最后，我们意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分功能，所以决定将其作为新的推荐方案来代替 Vuex。

    与 Vuex 相比，Pinia 不仅提供了一个更简单的 API，也提供了符合组合式 API 风格的 API，最重要的是，搭配 TypeScript 一起使用时有非常可靠的类型推断支持。

     npm install vuex@next --save

     

    参考资料： https://vuex.vuejs.org/zh/installation.html 

    6.6、安装axios

    npm install axios --save 

    参考资料： https://www.w3cschool.cn/jquti/jquti-kb3a35x1.html 

    6.7、安装echarts

    npm install echarts --save 

     参考资料： https://echarts.apache.org/examples/zh/index.html

    6.8、安装lodash

    npm install lodash --save 

    参考资料： https://www.lodashjs.com/ 

    6.9、安装moment

    npm install moment --save 

     参考资料： http://momentjs.cn/docs/#/use-it/

    6.10、安装@ant/g6

    npm install --save @antv/g6 

    参考资料： https://antv-g6.gitee.io/zh/docs/manual/getting-started 

    6.11、安装nprogress

    npm install --save nprogress 

    参考资料： https://blog.csdn.net/qq_31968791/article/details/106790179 

    6.12、 安装jquery

    npm install --save jquery 

     参考资料： https://www.runoob.com/jquery/jquery-tutorial.html

    7、组件使用

    7.1、vue-router和router-view使用

    APP.vue文件里面添加

    1. <script setup lang="ts">
    2.  
    3. script>
    4.  
    5. <template>
    6.   <div class="frame-container">
    7.     <router-view/>
    8.   div>
    9. template>
    10.  
    11. <style scoped>
    12. html,
    13. body {
    14.   margin: 0px;
    15.   height: 100%;
    16. }
    17. .frame-container {
    18.   width: 100%;
    19.   height: 100%;
    20. }
    21. style>

    src下新增router/index.ts文件

    1. import { createRouter, RouteRecordRaw, createWebHashHistory } from "vue-router";
    2.  
    3. const appRoutes: Array<RouteRecordRaw> = [
    4.   {
    5.     path: "/",
    6.     name: "home",
    7.     component: () => import("@/components/HelloWorld.vue")
    8.   },
    9.   {
    10.     path: "/HelloWorld",
    11.     name: "HelloWorld",
    12.     component: () => import("@/components/HelloWorld.vue")
    13.   },
    14. ];
    15. const router = createRouter({
    16.   // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    17.   history: createWebHashHistory(),
    18.   routes: [ ...appRoutes ]
    19. });
    20. export default router;

    在main.ts文件里面添加引用

    1. import { createApp } from 'vue'
    2. import App from './App.vue'
    3. import router from "@/router";
    4.  
    5.  
    6. const app = createApp(App)
    7. app.use(router)
    8. app.mount('#app')

    7.2 jQuery使用

    在main.ts文件中添加

    1. declare const window: any;
    2. import jQuery from 'jquery';
    3. window.$ = window.jQuery = jQuery;

     在.vue文件中使用

    1. declare const $: any;
    2. $.ajax({
    3.   url: "",
    4.   type: "GET",
    5.   dataType: "JSON"
    6. }).then( (res:any) =>{
    7.   //to some thing
    8. });

     7.3、引用svg图片

    安装依赖插件vite-plugin-svg-icons和fast-glob

    npm install vite-plugin-svg-icons --save 

    npm install fast-glob --save

    在vite.config.ts文件修改配置

    import {createSvgIconsPlugin} from 'vite-plugin-svg-icons';

    createSvgIconsPlugin({

          // 需要自动导入的 svg 文件目录（可修改）

          iconDirs: [resolve(process.cwd(), "src/svgIcon/svg")],

          // 执行icon name的格式（可修改）

          symbolId: "icon-[name]",

        })

    封装svg-icon图标

    在src目录下面创建svgIcon文件夹，svg文件夹下放.svg图片；index.vue封装svg-icon组件；

    1.  
    2. <template>
    3.   <svg class="svg-icon" aria-hidden="true" v-bind="$attrs" v-on="$listeners">
    4.     <use :xlink:href="symbolId" />
    5.   svg>
    6. template>
    7. <script setup lang="ts">
    8. import { computed, toRefs } from "vue";
    9. const props = defineProps({
    10.   name: {
    11.     type: String
    12.   },
    13. });
    14. const { name } = toRefs(props);
    15. const symbolId = computed(() => `#icon-${name.value}`);
    16. script>
    17.  
    18. <style scoped lang="scss">
    19. .svg-icon {
    20.   width: 1em;
    21.   height: 1em;
    22.   vertical-align: middle;
    23.   fill: currentColor;
    24.   overflow: hidden;
    25.   transition-duration: 0.3s;
    26.   border-radius: 4px;
    27.   box-sizing: border-box;
    28. }
    29.  
    30. style>

     在main.ts文件引用

    import svgIcon from '@/svgIcon/index.vue'
    import "virtual:svg-icons-register";
    app.component('svg-icon',svgIcon)

    1. import { createApp } from 'vue'
    2. import App from './App.vue'
    3. import svgIcon from '@/svgIcon/index.vue'
    4. import "virtual:svg-icons-register";
    5.  
    6. const app = createApp(App)
    7. app.component('svg-icon',svgIcon)
    8. app.mount('#app')

    .vue文件引用组件

            class="logo"

            name="vue"

          >

    7.4、引用pinia

    在main.ts文件中添加

    1.  
    2. import { createApp } from 'vue'
    3. import App from './App.vue'
    4. import { createPinia } from 'pinia'
    5. const pinia = createPinia()
    6.  
    7. const app = createApp(App)
    8. app.use(pinia)
    9. app.mount('#app')
    10.

     新增src/store/pinia/index.ts文件

    1. import { defineStore } from "pinia";
    2.  
    3. // 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
    4. // 第一个参数是你的应用中 Store 的唯一 ID。
    5. export const useAppConfigStore = defineStore('appConfig', {
    6.   state() {
    7.     return {
    8.       count: 0
    9.     }
    10.   },
    11.   getters: {
    12.     double: (state) => {
    13.       return state.count * 2
    14.     }
    15.   },
    16.   actions: {
    17.     increment() {
    18.       this.count++
    19.     },
    20.   }
    21. });
    22.  
    23.

     在.vue文件中使用

    2.  
    3. <template>
    4.   <div>
    5.     <el-button type="button" @click="handleCount()">操作appConfit.countel-button>
    6.     <p>appConfig.count: {{ appConfig.count }}p>
    7.     <p>appConfig.double: {{ appConfig.double }}p>
    8.   div>
    9. template>

     

    7.5、引用tailwindcss组件

    参考资料： https://www.tailwindcss.cn/docs/installation

    npm install -D tailwindcss

    npm install postcss

    npm install autoprefixer

    npx tailwindcss init -p

     生成/src/tailwind.config.js和/src/postcss.config.js配置文件

    在/src/tailwind.config.js配置文件中添加所有模板文件路径

    新建/src/resources/tailwind.var.css文件；在文件中添加：

    1. @tailwind base;
    2. @tailwind components;
    3. @tailwind utilities;

    在/src/main.ts中进行引用

    import "./resources/tailwind.var.css";

     在vue文件中使用

    1. <template>
    2.   <div class="h-full">
    3.     <h1 class="text-3xl font-bold underline">Hello world!h1>
    4.     <div class="flex">
    5.       <div class="flex-none h-10 w-[80px] bg-red-400" >11div>
    6.       <div class="flex-1 h-10 bg-orange-400">22div>
    7.       <div class="flex-1 h-10 bg-lime-400">33div>
    8.     div>
    9.   div>
    10. template>
    11.  
    12. <script setup lang="ts">script>
    13.  
    14. <style lang="scss" scoped>
    15.  
    16. style>

     

  • 相关阅读:
    数据库基本知识
    联通面试题
    嵌入式Qt开发C++核心编程知识万字总结
    如何写最基础的播放音频界面
    对象存储之：多版本
    Go sync.Cond条件变量的学习
    Windows关闭zookeeper、rocketmq日志输出以及修改rocketmq的JVM内存占用大小
    uniapp下拉刷新
    20个最佳实践提升Terraform工作流程｜Part 2
    【总目录】机器学习原理剖析、开源实战项目、全套学习指南（50篇合集）
  • 原文地址：https://blog.csdn.net/zhou13528482267/article/details/132692091