BootCDN
前端开源项目 CDN
vue2
vue2学习资源
-
官方网站 : https:/cn.vuejs.org/index.html
vue3
Vue template在线演示编译结果
新增功能
-
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://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基础