前言
一直想集成一个基础的、完整的前端框架,以后随做随用,也可以当做进阶练习。
- vite
- vue3
- ts
- pinia
- vueuse
项目地址
vite创建项目
npm init vite@latest
npm install
npm run dev
eslint校验
npm install -g eslint
-g表示全局安装
如果不需要全局安装去掉-g,就只在当前项目中使用
初始化(按照提示生成.eslintrc文件 json js格式都可以)
npm init @eslint/config
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
-
服务器端渲染支持
-
[ ] 托管全局状态
npm install pinia
创建store文件夹ndex.ts,导出store
import { createPinia } from 'pinia'
const store = createPinia()
export default store
进入main.ts,导入store,使用.use(store)挂载
示例
- 创建user.ts
import { defineStore } from 'pinia'
export const useUserStore = defineStore({
id: 'user', // id必填,且需要唯一
state: () => {
return {
name: '张三'
}
},
actions: {
updateName(name: string) {
this.name = name
}
}
})
- 进入helloword.vue测试
可以看到name为修改后的“李四”
vue-router4
npm install vue-router@4
创建router文件夹,以及index.ts,导出router
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;
挂载
修改APP.VUE
<template>
<RouterView/>
</template>
创建pages
测试
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>
less
npm install -g less
axios
默认配置
element-plus
npm install element-plus --save
最后
这只是最基本的集成,会不断完善它,让它成为一个完整的工具集,能够用来快速开发
暂无评论内容