yarn 和 npm 下载模块
- axios 发送请求的包
- bootstrap
- vuex 用来建立共同仓库(目前用3.6.2版本)
- webpack 用来打包的模块
- vue-router 路由
- element-ui 使用element 组件的包
- vuex-persistedstate 包持久化 自动将数据存储到localStorage的插件
- vue-quill-editor 富文本编辑器(用法需要到npm官网去复制导入代码)
- dayjs 或 moment 用来处理时间
- nprogress 用来可视化跳转进度(一般在前置路由守卫中设置
NProgress.start(), 在next()后或者后置路由守卫中设置NProgress.done()) - cos-js-sdk-v5 腾讯开发的用来进行图片上传的包
- core-js 用来发送api过程中的处理包
- @babel/plugin-syntax-dynamic-import 设置路由懒加载的包
- vue-i18n 国际化的包, 能够配合element 语言包实现不同的语言设置
- @antv/data-set @antv/g2 和echarts 差不多, 阿里的可视化画图网站
- screenfull 调用screenFull.toggle() 能切换全屏(目前用5.2.0)
- koa koa-static 服务器框架 (和express 类似)
- koa2-connect-history-api-fallback 专门处理router 中设置mode为 history模式的中间件(在服务器配置中导入并使用)
- koa2-proxy-middleware 安装跨域代理中间件
- create-vite-app 创建基于 vite 打包的项目包
- normalize.css 通过 yarn add 下载, 用来重置样式
- style-resources-loader 和 vue-cli-plugin-style-resources-loader 用来自动引入 less 变量到组件中
- @vueuse/core@5.3.0 封装了 js 中常见的一些逻辑
- useWindowScroll 能拿到窗口滚动的高度值
- useIntersectionObserver 能实现组件数据懒加载
- useRefHistory 跟踪响应式数据的变化
- useIntervalFn 有关于倒计时定时器的逻辑函数(重置 / 暂停 / 继续)
- lodash 封装常用方法, 防抖(debounce) 节流(throting) 深拷贝(deepclone)
- classnames 用来在 react 中对类名设置多重写法
- react-redux 实现在 React 中使用 Redux 进行状态管理
- react-persist 用来持久化 react-redux 中数据
- react-thunk 在函数形式的 action 中就可以执行异步操作代码
- redux-devtools-extension 使 Chrome 中 redux-devtools 插件生效的包
- react-router-dom@5.3.0 路由
- antd 基于 Ant Design 设计体系的 React UI 组件库
- sass 样式预处理器
- less 样式预处理器
- @craco/craco 通过@来表示 src 目录的绝对路径(react)
- source-map-explorer 分析 react 打包之后的包(相当于 vue 中 --report), 用于打包优化
- typescript 另一种语法
全局包(通过yarn global add ... )
- @vue/cli vue脚手架
- npm 用来下包的
- nrm 切换镜像下载源
- yarn 用来下载模块的命令
- live-server 用来可以全局打开服务器
- cnpm 也是用来下包的(但注意下的包不能移动, 不然用不了)
- npx 避免全局安装模块 (如 npx create-react-app my-react-app)
注意
- -D 用来下载开发依赖的包, 会在项目上线后清除(yarn build) ; 不加默认为项目依赖
main.js中
- 在main.js一般引入会在全局使用的模块, 像bootstrap
- 一般也会引入需要挂载到vue对象上的对象, 比如仓库数据 store 和 路由router
子组件中export default{ }中的核心成员
- data(){} 数据
- methods:{} 方法
- computed:{} 计算属性
- components 组件注册
- 十一个生命周期钩子函数
- beforeCreate created
- beforeMounte mounted
- beforeupdate updated
- beforedestroy destoryed
- actived deactived
- watch 侦听器
- props 接收父组件传来变量
vscode 插件
- Vetur 语法高亮、智能感知、Emmet, 包含格式化功能， Alt+Shift+F （格式化全文）
- ESLint 校验js代码规范
- open in browser 可以选择在浏览器预览
- Live Server 加载功能的本地开发服务器，以处理静态和动态页面
- Prettier ESLint 格式化JavaScript and Typescript代码插件
- Chinese 汉化
- Bracket Pair Colorizer 符号色彩匹配(比如对应括号高亮显示)
- vscode-icons 将vscode特定文件显示为特定图标
- Vue 2 Snippets vue代码片段提示,一键补充
- easyLess 用来将less文件转成css
- easySass 用来将sass文件转成css
- GitLens — Git supercharged 能够显示协作中每个人的代码修改
- Markdown Preview Enhanced 能够在vscode 中显示markdown 文件
- Vue Language Features(Volar) 能够根据标签划分工作区域
- github copilot 智能补充代码
浏览器插件
- GiteeTree 能够直接在git 中显示git工作树
- Vue.js devtools 显示 vue 项目
- React Developer Tools 显示 react 项目
- iGuge Helper 代理服务器
项目打包的cdn (jsdelivr 太慢)
- bootcdn www.bootcdn.cn
- 极兔云
git 提交规范
1.1、type
必填，message的类型，有以下几种常用的类型
- feat：提交新的功能，记忆：feature
- fix：解决了bug
- docs：修改的是文档相关的内容，记忆：documentation
- style：格式修改，没有修改代码逻辑，比如格式化、换行等
- refactor：重构代码，既没有新增功能，也没有修复bug，比如提取某段代码为一个方法、重构某个功能
- perf：性能、体验优化等，记忆：performance性能
- test：新增test用例或修改现有测试用例
- chore：构建过程或辅助工具的变动，非src和test的修改，比如构建流程, 依赖管理等
当同时有feat、fix和其他类型时，类型取feat、fix。
eslint配置文件rules中要加的规则
'space-before-function-paren': ['error', 'never'],
'vue/multi-word-component-names': 0
查看打包文件的报告(给build设置 --report, package.json文件中)
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --report",
"lint": "vue-cli-service lint"
},
设置不降级node_modules中的包(vue.config.js文件中)
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: false,
// publicPath: './'
})
可以设置项目在相对路径下打开(publicPath), 但一般不建议设置, 默认就用根路径下打开项目
项目打包
通过看打包后生成的report.html来决定从
jsdelivr入哪些包
(这样就不用在项目上线时打包, 能够从CDN拿到第三方包资源, 通过url的形式引入)
- 先去
jsdelivr中找需要导入的包的文件名(比如element需要引入...index.css和...echarts.min.js), 复制需要导入的文件的地址, 注意和自己写的项目的包版本匹配 - 这里要先在配置文件中设置需要在全局查找的第三方包(注意这里的配置方式是:
"打包名的名称" : "在window上挂载的名字", )
- 将jsdelivr 中找到第三方包的链接并复制, 然后public的index.html中利用script的src引用
注意:
- css的优化直接在index.html中title标签后通过link标签引入即可, 不需要在配置文件中配置, 然后注意将项目中导入的css注释掉
- 浏览器支持umd标准(vuex-persisted这个包不能直接用...min.js ,还要注意在window对象上的名字为createPersistedState)
路由懒加载
原来的页面会在打开时加载所有组件, 懒加载能够实现点击对应组件时, 再加载相应的组件
- 安装 babel 插件
npm install --save-dev @babel/plugin-syntax-dynamic-import
- 修改项目根目录下的
babel.config.js配置文件，新增plugins节点
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
// 实现路由组件按需导入的 babel 插件
plugins: ['@babel/plugin-syntax-dynamic-import']
}
- 在
/src/router/index.js模块中，基于const 组件 = () => import('组件的存放路径')语法，改造每个路由组件的导入方式。例如：
// 导入 Reg 组件
// import Reg from '@/views/Reg/Reg.vue'
const Reg = () => import('@/views/Reg/Reg.vue')
// 导入 Login 组件
// import Login from '@/views/Login/Login.vue'
const Login = () => import('@/views/Login/Login.vue')
人资项目打包
- 项目中需要首先需要打包这三个包
- 将externals 对象拿出来单独处理, 并设置cdn 对象
let externals = {}
let cdn = { css: [], js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {
externals = {
/**
* externals 对象属性解析：
* '包名' : '在项目中引入的名字'
*/
'vue': 'Vue',
'element-ui': 'ELEMENT',
'xlsx': 'XLSX'
}
cdn = {
css: [
'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表
],
js: [
// vue must at first!
'https://unpkg.com/vue@2.6.12/dist/vue.js', // vuejs
'https://unpkg.com/element-ui/lib/index.js', // element-ui js
'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js', // xlsx
]
}
}
- 配合之前设置的cdn 对象中的css 和 js 设置, 注入到index.html 中
+ config.plugin('html').tap(args => {
+ args[0].cdn = cdn // 配置cdn给插件
+ return args
+ })
- 通过模板语法实现在index.html 上注入css 和js
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>
<!-- 引入样式 -->
+ <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
+ <link rel="stylesheet" href="<%=css%>">
+ <% } %>
<!-- 引入JS -->
+ <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
+ <script src="<%=js%>"></script>
+ <% } %>
</head>
注意
-
人资项目中因为直接下载别人的modules, 电脑没有权限打开报错, 为文件添加权限
sudo chmod 777 node_modules/.bin/vue-cli-service然后再yarn dev运行 (下面为报错)
