站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

vue3+vite2+ts4搭建项目环境规范

时间:2022-04-27 [网络编程]作者:fabuyuan 浏览:6 次

本篇文章给大家分享一套规范的vue3+vite2+ts4前端工程化项目环境,希望对大家有所帮助!

一套规范的vue3+vite2+ts4前端工程化项目环境 https://webvueblog.github.io/vue3-vite2-ts4/

(学习视频分享:vuejs教程)

Vue 3 + Typescript + Vite

vue3-vite2-ts4

npm init @vitejs/app
vue
vue-ts
npm install
npm run dev

目录结构如下

├── public              静态资源
├── src
│   ├── assets           资源目录(图片、less、css等)
│   ├── components       项目组件
│   ├── App.vue          主应用
│   ├── env.d.ts         全局声明
│   └── main.ts          主入口
├── .gitignore           git忽略配置
├── index.html           模板文件
├── package.json        依赖包/运行脚本配置文件
├── README.md
├── tsconfig.json        ts配置文件
├── tsconfig.node.json   ts配置文件
└── vite.config.ts       vite配置

每个目录的作用后文都会提及

├── src
│   ├── router           路由配置
│   ├── stores           状态管理
│   ├── typings          ts公共类型
│   ├── utils            工具类函数封装
│   └── views            页面视图

指定解析路径使用的 path module需要先安装@type/node

npm install @types/node --save-dev

打包功能

build: {
      outDir: 'dist',   // 指定打包路径,默认为项目根目录下的 dist 目录
      terserOptions: {
          compress: {
              keep_infinity: true,  // 防止 Infinity 被压缩成 1/0,这可能会导致 Chrome 上的性能问题
              drop_console: true,   // 生产环境去除 console
              drop_debugger: true   // 生产环境去除 debugger
          },
      },
      chunkSizeWarningLimit: 1500   // chunk 大小警告的限制(以 kbs 为单位)
}

接入代码规范

ESlint 被称作下一代的 JS Linter 工具,能够将 JS 代码解析成 AST 抽象语法树,然后检测 AST 是否符合既定的规则。

yarn add eslint @typescript-eslint/parser @typescript/eslint-plugin eslint-plugin-vue

TypeScirpt 网决定全面采用 ESLint 作为代码检查的工具,并创建了一个新项目 typescript-eslint,提供了 TypeScript 文件的解析器 @typescript-eslint/parser 和相关的配置选项 @typescript-eslint/eslint-plugin 等

使用 scss 来增强 css 的语法能力

yarn add sass
yarn add stylelint
yarn add stylelint-scss

接入naive ui库

Naive UI 是尤大推荐的 vue3 UI 库(https://www.naiveui.com/zh-CN/os-theme)

接入 vue-router

npm install vue-router --save
import {
    createRouter, createWebHashHistory, RouteRecordRaw,
} from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    { path: '/', name: 'Home', component: () => import('views/home/index.vue')}
]

const router = createRouter({
    history: createWebHashHistory(),    // history 模式则使用 createWebHistory()
    routes,
})

export default router
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

const app = createApp(App as any)
app.use(router)

接入状态管理工具 pinia

pinia 是一个轻量级的状态管理库

npm install pinia --save

引入

在 main.ts中引入

import { createPinia } from 'pinia'

app.use(createPinia())

在src/stores下新建一个counters.ts文件

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
    state: () => {
        return {
            count: 0
        }
    },
    getters: {
        count() {
            return this.count
        }
    },
    actions: {
        increment() {
            this.count++
        }
    }
})
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
    const count = ref(0)
    function increment() {
      count.value++
    }

    return { count, increment }
})
<script setup>
    import { useCounterStore } from '@/stores/counter'

    const counter = useCounterStore()
</script>
<template>
    <div @click="counter.increment()">
        {{ counter.count }}
    </div>
</template>
const counter = useCounterStore()
const { count } = counter

<div @click="counter.increment()">{{ count }}</div>

pinia很贴心的提供了storeToRefs方法,让我们可以享受解构的乐趣:

const { count } = storeToRefs(counter)

接入图表库 echarts5

安装&;引入

npm install echarts --save

在src/utils/下新建echarts.ts用来引入我们需要使用的组件

import * as echarts from 'echarts/core'
import {
    BarChart,
    // 系列类型的定义后缀都为 SeriesOption
    BarSeriesOption,
    // LineChart,
    LineSeriesOption
} from 'echarts/charts'
import {
    TitleComponent,
    // 组件类型的定义后缀都为 ComponentOption
    TitleComponentOption,
    TooltipComponent,
    TooltipComponentOption,
    GridComponent,
    GridComponentOption,
    // 数据集组件
    DatasetComponent,
    DatasetComponentOption,
    // 内置数据转换器组件 (filter, sort)
    TransformComponent,
    LegendComponent
} from 'echarts/components'
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
export type ECOption = echarts.ComposeOption<
    | BarSeriesOption
    | LineSeriesOption
    | TitleComponentOption
    | TooltipComponentOption
    | GridComponentOption
    | DatasetComponentOption
>

// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer,
    LegendComponent
])

// eslint-disable-next-line no-unused-vars
const option: ECOption = {
    // ...
}

export const $echarts = echarts

就可以在页面中使用了:

<script setup>
    import { onMounted } from 'vue'
    import { $echarts, ECOption } from '@/utils/echarts'

    onMounted(() => {
        // 测试echarts的引入
        const ele = document.getElementById('echarts') as HTMLCanvasElement
        const myChart = $echarts.init(ele)
        const option: ECOption = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        }     
</script>

配置统一 axios 处理

安装&引入

npm install axios --save

截图:

(学习视频分享:web前端开发、编程入门)

以上就是vue3+vite2+ts4搭建项目环境规范的详细内容,更多请关注站长家园其它相关文章!

本文标签:  Vue

转载请注明来源:vue3+vite2+ts4搭建项目环境规范

本文永久链接地址:https://www.adminjie.com/post/11711.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • jquery对象访问的方法有哪些

      jquery对象访问的方法有哪些

      jquery对象访问的方法有:1、each(),可以遍历指定的jquery对象,语法“$.each(对象,回调函数)”;2、size(),可统计jquery对象...

    • jquery怎么根据id判断元素是否存在

      jquery怎么根据id判断元素是否存在

      判断方法:1、通过id属性值获取指定元素,语法“$("#id值")”,会返回一个包含指定元素的jQuery对象;2、使用“元素对象.length>0”语句...

    • jquery怎么删除所有li元素

      jquery怎么删除所有li元素

      删除方法:1、利用find()选取文档的所有li元素,语法“$("body").find("li")”,返回一个包含所有li元素的jQuery对象;2、利用re...

    • oracle怎么查询表的同义词

      oracle怎么查询表的同义词

      在oracle中,可以利用select语句配合“dba_synonyms”查询表的所有同义词,语法为“select*fromdba_synonyms”;同...

    • jquery如何改变img的属性值

      jquery如何改变img的属性值

      两种改变方法:1、用attr()修改属性值,语法“$("img").attr({属性1:"值",属性2:"值"...});”。2、用prop()修改属性值,语法...

    热门文章