前言

一直想集成一个基础的、完整的前端框架,以后随做随用,也可以当做进阶练习。

  • vite
  • vue3
  • ts
  • pinia
  • vueuse

项目地址

github

vite创建项目

vite中文文档

npm init vite@latest

vite+vue3+ts+pinia+less+vueuse+element-plus企业级前端框架

npm install

npm run dev

vite+vue3+ts+pinia+less+vueuse+element-plus企业级前端框架

eslint校验

github地址

中文地址

npm install -g eslint

-g表示全局安装
如果不需要全局安装去掉-g,就只在当前项目中使用

vite+vue3+ts+pinia+less+vueuse+element-plus企业级前端框架

初始化(按照提示生成.eslintrc文件 json js格式都可以)

npm init @eslint/config

vite+vue3+ts+pinia+less+vueuse+element-plus企业级前端框架

prettier格式化

简而言之,这个工具能够使输出代码保持风格一致。

文档地址

npm install --save-dev --save-exact prettier

创建配置文件

echo {}> .prettierrc.js

常用配置

module.exports = {
    // 一行最多 80 字符
    printWidth: 80,
    // 使用 4 个空格缩进
    tabWidth: 4,
    // 不使用 tab 缩进,而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: true,
    // 使用单引号代替双引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不使用单引号,而使用双引号
    jsxSingleQuote: false,
    // 末尾使用逗号
    trailingComma: 'all',
    // 大括号内的首尾需要空格 { foo: bar }
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数,只有一个参数的时候,也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符使用 lf
    endOfLine: 'lf'
}

Pinia全局状态

Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。 如果您熟悉 Composition API,您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的,但如果它是服务器端呈现的,会使您的应用程序暴露于安全漏洞。 但即使在小型单页应用程序中,您也可以从使用 Pinia 中获得很多好处:

  • dev-tools 支持

    • 跟踪动作、突变的时间线
    • Store 出现在使用它们的组件中
    • time travel 和 更容易的调试
  • 热模块更换

    • 在不重新加载页面的情况下修改您的 Store
    • 在开发时保持任何现有状态
  • 插件:使用插件扩展 Pinia 功能

  • 为 JS 用户提供适当的 TypeScript 支持或 autocompletion

  • 服务器端渲染支持

  • 托管全局状态

Pinia中文文档

npm install pinia

创建store文件夹ndex.ts,导出store

import { createPinia } from 'pinia'

const store = createPinia()

export default store

vite+vue3+ts+pinia+less+vueuse+element-plus企业级前端框架

进入main.ts,导入store,使用.use(store)挂载

vite+vue3+ts+pinia+less+vueuse+element-plus企业级前端框架 示例

  1. 创建user.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore({
  id: 'user', // id必填,且需要唯一
  state: () => {
    return {
      name: '张三'
    }
  },
  actions: {
    updateName(name: string) {
      this.name = name
    }
  }
})

  1. 进入helloword.vue测试

vite+vue3+ts+pinia+less+vueuse+element-plus企业级前端框架

vite+vue3+ts+pinia+less+vueuse+element-plus企业级前端框架

可以看到name为修改后的“李四”

vue-router4

vue-router4中文文档

npm install vue-router@4

创建router文件夹,以及index.ts,导出router vite+vue3+ts+pinia+less+vueuse+element-plus企业级前端框架


import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
const routes: Array<RouteRecordRaw> = [
  {
    path: '/login',
    name: 'Login',
    meta: {
        title: '登录',
        keepAlive: true,
        requireAuth: false
    },
    component: () => import('@/pages/login.vue')
  },
  {
      path: '/',
      name: 'Index',
      meta: {
          title: '首页',
          keepAlive: true,
          requireAuth: true
      },
      component: () => import('@/pages/index.vue')
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes
});
export default router;

挂载

vite+vue3+ts+pinia+less+vueuse+element-plus企业级前端框架

修改APP.VUE

 <template>
   <RouterView/>
 </template>

vite+vue3+ts+pinia+less+vueuse+element-plus企业级前端框架

创建pages

vite+vue3+ts+pinia+less+vueuse+element-plus企业级前端框架

测试

vite+vue3+ts+pinia+less+vueuse+element-plus企业级前端框架

vueuse

官网

npm i @vueuse/core

使用useInterval为例


<template>
   <div>
        <p>首页 {{counter}}</p> 
   </div>
</template>

<script lang="ts">
import { useInterval } from '@vueuse/core'
import { defineComponent } from 'vue';

     export default defineComponent({
         name: 'VueUse',
         setup() {
            const { counter, pause, resume } = useInterval(200, { controls: true })
           return {
            counter, pause,resume
           }
         }
     });

</script>

vite+vue3+ts+pinia+less+vueuse+element-plus企业级前端框架

vite+vue3+ts+pinia+less+vueuse+element-plus企业级前端框架

less

中文文档

npm install -g less

axios

中文文档

默认配置

vite+vue3+ts+pinia+less+vueuse+element-plus企业级前端框架

element-plus

文档

npm install element-plus --save

最后

这只是最基本的集成,会不断完善它,让它成为一个完整的工具集,能够用来快速开发 vite+vue3+ts+pinia+less+vueuse+element-plus企业级前端框架

声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你

原文地址:vite+vue3+ts+pinia+less+vueuse+element-plus企业级前端框架