vue3+vite相关
BootCDN
前端开源项目 CDN
-
https://www.bootcdn.cn/
vue2
vue2学习资源
-
官方网站 : https:/cn.vuejs.org/index.html
-
免费课 : https://www.imooc.com/learn/1091
vue3
Vue template在线演示编译结果
-
Vue3: https://vue-next-template-explorer.netlify.app/
-
Vue2: https://vue-template-explorer.netlify.app/
新增功能
-
Fragment - -不受根节点限制,渲染函数可接收Array
-
Teleport一类似Portal ,随用随取, e.g. 弹窗, Actions
-
Suspense一嵌套的异步依赖, e.g. async setup()
资料
-
Vue3.0官方仓库: https://github.com/vuejs/vue-next
-
中文文档: https://v3.cn.vuejs.org/
-
组合式API : https://composition-api.vuejs.org/api.html
-
组合式API中文：https://v3.cn.vuejs.org/guide/composition-api-introduction.html
-
官方文档: https://v3.vuejs.org/
vue3带来的变化
-
性能提升1.3~2x
-
TS支持,新增: Fragment、Teleport、 Suspense
-
按需加载(配合vite ) &组合API
vue全家桶
-
Vuex v4.0.0-beta.11 迁移指南: https://github.com/vuejs/vuex/tree/4.0
-
Vue-router v4.0.0-beta.4 迁移指南: https://next.router.vuejs.org/guide/migration/#new-features
-
vue-loader v16.0.0-beta.7
vite
vite官网地址： https://cn.vitejs.dev/
vite文件配置：https://cn.vitejs.dev/config
Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。 它主要具有以下特点：
-
快速的冷启动
-
即时的模块热更新
-
真正的按需编译
使用vite体验更快速
vite创建项目
需要选择模板 npm init @vitejs/app
$ npm init vite-app 直接创建 $ cd $ npm install $ npm run dev
eslint
vscode中使用eslint + prettier来规范代码格式
vscode安装以下插件
EsLint、vetur、Prettier - Code formatter
vscode设置了添加配置项，默认会去查找你项目中的eslint配置文件
vscode > 设置 > setting.json
{
//打开文件不覆盖
"workbench.editor.enablePreview": false,
//关闭快速预览
"editor.minimap.enabled": false,
//打开自动保存
"files.autoSave": "afterDelay",
//使用主题
"workbench.colorTheme": "Default Dark+",
// 头部注释
"fileheader.customMade": {
"Author": "wyh",
"Date": "Do not edit", // 设置后默认设置文件生成时间
"LastEditTime": "Do not edit", // 设置后，保存文件更改默认更新最后编辑时间
"LastEditors": "wyh", // 设置后，保存文件更改默认更新最后编辑人
"Description": ""
},
// 函数注释
"fileheader.cursorMode": {
"description": "",
"param": "",
"return": ""
},
//手机项目rem适配
"px-to-rem.px-per-rem": 37.5,
// -----------------------自动格式化配置eslint+prettier-----------------------
// 每次保存自动格式化ctrl+s
"editor.formatOnSave": true,
// 每次保存的时候将代码按eslint格式进行修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
//配置内配置对 .vue 文件的格式化
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
//配置内配置对 .ts 文件的格式化
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
//配置内配置对 .js 文件的格式化
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
//配置内配置对 .json 文件的格式化
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.fontLigatures": null,
"[json]": {
"editor.quickSuggestions": {
"strings": true
},
"editor.suggest.insertMode": "replace"
} //只有一个参数的箭头函数的参数是否带圆括号(默认avoid)
}
我们借助eslint规范项目代码，通过prettier做代码格式化。
首先在项目安装依赖，pckage.json
{
"scripts": {
"lint": "eslint \"src/**/*.{js, vue}\""
}，
"devDependencies": {
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^7.0.0-0",
"prettier": "^1.19.1"
}
}
然后配置lint规则，.eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
extends: [ " plugin:vue/vue3-essential", "eslint : recommended", "@vue/prettier"],
parserOptions:{
parser: "babel-eslint",ss
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
"prettier/prettier": [
"warn",
{
// singleQuote: none, //单引号
// semi: false, //分号
trailingComma: "es5",
},
],
},
};
如果有必要还可以配置prettier .config. js修改prettier的默认格式化规则
module.exports = {
printWidth: 80, //每行代码长度(默认80)
tabWidth: 2, //每个tab相当于多少个空格 (默认2)
useTabs: false, //是否使用tab进行缩进(默认false)
singleQuote: true, //使用单引号(默认false)
semi: true ,//声明结尾使用分号(默认true)
trailingComma: 're5', //多行使用拖尾逗号(默认none)
bracketSpacing: true, //对象字面量的大括号间使用空格(默认true)
jsxBracketSameLine: false, //多行JSX中的> 放置在最后一行的结尾， 而不是另起一行
arrowParens:"avoid", //只有一个参数的箭头函数的参数是否带圆括号(默认avoid)
};
npm run lint 检查语法
router4 + vuex4
npm i vue-router@next vuex@next -S
路由模板代码
import { createRouter, createwebHashHistory } from 'vue-router';
// 工厂函数创建router实例
const router = createRouter({
history: createwebHashHistory(),
routes: [
{
path: '/',
meta: {
title: "用户列表",
icon: "el-icon-document",
},
component: () => import('views/home.vue') }
]
});
export default router
状态管理器模板代码
import {createStore} from 'vuex';
// 工厂函数创建 实际是个插件
export default store = createStore({
state: {
counter: 0
},
mutations: {
add(state){
state.counter ++
}
}
});
import router from './router'
import store from './store'
createApp(App)
.use(router)
.use(store)
.mount('#App')
css管理
|-styles |- index.sass 作为出口组织所有样式（import），同时编写全局样式
ts
ts基础
-
https://www.tslang.cn/
-
https://jkchao.github.io/typescript-book-chinese/
-
https://ts.xcatliu.com/