https://github.com/vuejs/create-vue
安装完create-vue
后,执行create-vue
命令
➜ root yarn global add create-vue
yarn global v1.22.17
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "create-vue@3.6.1" with binaries:
- create-vue
✨ Done in 4.19s.
➜ root create-vue
Vue.js - The Progressive JavaScript Framework
✔ Project name: … vue3-demo
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Cypress
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
Scaffolding project in /root/vue3-demo...
Done. Now run:
cd vue3-demo
npm install
npm run format
npm run dev
➜ root
安装依赖
cd vue3-demo
yarn install
打开vite.config.ts
,配置server
选项,参考:https://cn.vitejs.dev/config/server-options.html
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
// 本地服务配置
// server的参数配置:https://cn.vitejs.dev/config/server-options.html
server: {
// 端口
port: 3000
}
})
安装rollup-plugin-visualizer
➜ root yarn add rollup-plugin-visualizer --save-dev
yarn add v1.22.17
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning " > @vue/test-utils@2.3.0" has unmet peer dependency "@vue/compiler-dom@^3.0.1".
warning " > @vue/test-utils@2.3.0" has unmet peer dependency "@vue/server-renderer@^3.0.1".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 11 new dependencies.
info Direct dependencies
└─ rollup-plugin-visualizer@5.9.0
info All dependencies
├─ cliui@8.0.1
├─ define-lazy-prop@2.0.0
├─ get-caller-file@2.0.5
├─ is-docker@2.2.1
├─ is-wsl@2.2.0
├─ open@8.4.2
├─ require-directory@2.1.1
├─ rollup-plugin-visualizer@5.9.0
├─ y18n@5.0.8
├─ yargs-parser@21.1.1
└─ yargs@17.7.1
✨ Done in 1.73s.
➜ root
设置vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { visualizer } from 'rollup-plugin-visualizer'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx(),
// 分析,参考https://github.com/btd/rollup-plugin-visualizer
// 执行npm run build时,会自动打开stats.html页面
visualizer({
emitFile: false,
filename: 'stats.html', //分析图生成的文件名
open: true //如果存在本地服务端口,将在打包后自动展示
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
// 本地服务配置
// server的参数配置:https://cn.vitejs.dev/config/server-options.html
server: {
// IP,default->localhost
// 设置为0.0.0.0,允许局域网内访问
host: '0.0.0.0',
// 端口,default->5173
port: 3000,
// 自动从浏览器打开
open: true
}
})
stats.html打开如下图
安装vite-plugin-mock
,mockjs
,vite-plugin-mock是依赖于mockjs的
➜ root yarn add mockjs vite-plugin-mock --save-dev
yarn add v1.22.17
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning " > @vue/test-utils@2.3.0" has unmet peer dependency "@vue/compiler-dom@^3.0.1".
warning " > @vue/test-utils@2.3.0" has unmet peer dependency "@vue/server-renderer@^3.0.1".
warning "vite-plugin-mock > @rollup/plugin-node-resolve@13.3.0" has unmet peer dependency "rollup@^2.42.0".
warning "vite-plugin-mock > @rollup/plugin-node-resolve > @rollup/pluginutils@3.1.0" has unmet peer dependency "rollup@^1.20.0||^2.0.0".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
├─ mockjs@1.1.0
└─ vite-plugin-mock@2.9.6
info All dependencies
├─ commander@10.0.0
├─ mockjs@1.1.0
└─ vite-plugin-mock@2.9.6
✨ Done in 3.40s.
➜ root
设置vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import type { UserConfigExport, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { visualizer } from 'rollup-plugin-visualizer'
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/
export default ({ command }: ConfigEnv): UserConfigExport => {
console.log('command', command)
return {
plugins: [
vue(),
vueJsx(),
// 分析,参考https://github.com/btd/rollup-plugin-visualizer
// 执行npm run build时,会自动打开stats.html页面
visualizer({
emitFile: false,
filename: 'stats.html', //分析图生成的文件名
open: true //如果存在本地服务端口,将在打包后自动展示
}),
// 引入mock数据插件,参考https://github.com/vbenjs/vite-plugin-mock
viteMockServe({
// mock数据文件存放的文件夹,相对于项目根目录
mockPath: 'mock',
localEnabled: command === 'serve'
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
// 本地服务配置
// server的参数配置:https://cn.vitejs.dev/config/server-options.html
server: {
// IP,default->localhost
// 设置为0.0.0.0,允许局域网内访问
host: '0.0.0.0',
// 端口,default->5173
port: 3000,
// 自动从浏览器打开
open: true
}
}
}
unplugin-auto-import
,参考https://github.com/antfu/unplugin-auto-importtsconfig.json
的include包含auto-imports.d.ts
,否则eslint会检测时会报警.eslintrc.cjs
配置extend添加 ‘.eslintrc-auto-import.json’
//.eslintrc.cjs
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript',
'@vue/eslint-config-prettier/skip-formatting',
'.eslintrc-auto-import.json'
],
overrides: [
{
files: ['cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}'],
extends: ['plugin:cypress/recommended']
}
],
parserOptions: {
ecmaVersion: 'latest'
},
rules: {}
}
{
"extends": "@vue/tsconfig/tsconfig.node.json",
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"playwright.config.*",
// 自动导入引入,否则页面会报(提示未引入)
"auto-imports.d.*"
],
"compilerOptions": {
"composite": true,
"types": ["node"]
}
}
➜ root yarn add unplugin-auto-import --save-dev
yarn add v1.22.17
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "vite-plugin-mock > @rollup/plugin-node-resolve@13.3.0" has unmet peer dependency "rollup@^2.42.0".
warning "vite-plugin-mock > @rollup/plugin-node-resolve > @rollup/pluginutils@3.1.0" has unmet peer dependency "rollup@^1.20.0||^2.0.0".
warning " > @vue/test-utils@2.3.0" has unmet peer dependency "@vue/compiler-dom@^3.0.1".
warning " > @vue/test-utils@2.3.0" has unmet peer dependency "@vue/server-renderer@^3.0.1".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 40 new dependencies.
info Direct dependencies
└─ unplugin-auto-import@0.15.0
info All dependencies
├─ @antfu/utils@0.7.2
├─ @babel/standalone@7.21.2
├─ @nuxt/kit@3.2.3
├─ @nuxt/schema@3.2.3
├─ chownr@2.0.0
├─ consola@2.15.3
├─ create-require@1.1.1
├─ destr@1.2.2
├─ dotenv@16.0.3
├─ enhanced-resolve@4.5.0
├─ errno@0.1.8
├─ flat@5.0.2
├─ fs-minipass@2.1.0
├─ giget@1.1.2
├─ globby@13.1.3
├─ hash-sum@2.0.0
├─ hookable@5.4.2
├─ isarray@1.0.0
├─ knitwork@1.0.0
├─ lodash.template@4.5.0
├─ lodash.templatesettings@4.2.0
├─ memory-fs@0.5.0
├─ minizlib@2.1.2
├─ mkdirp@1.0.4
├─ mri@1.2.0
├─ node-fetch-native@1.0.2
├─ postcss-import-resolver@2.0.0
├─ process-nextick-args@2.0.1
├─ prr@1.0.1
├─ rc9@2.0.1
├─ readable-stream@2.3.8
├─ safe-buffer@5.1.2
├─ slash@4.0.0
├─ string_decoder@1.1.1
├─ tapable@1.1.3
├─ tar@6.1.13
├─ unctx@2.1.2
├─ unplugin-auto-import@0.15.0
├─ webpack-sources@3.2.3
└─ webpack-virtual-modules@0.5.0
✨ Done in 8.19s.
➜ root
配置vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import type { UserConfigExport, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { visualizer } from 'rollup-plugin-visualizer'
import { viteMockServe } from 'vite-plugin-mock'
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default ({ command }: ConfigEnv): UserConfigExport => {
console.log('command', command)
return {
plugins: [
vue(),
vueJsx(),
// 分析,参考https://github.com/btd/rollup-plugin-visualizer
// 执行npm run build时,会自动打开stats.html页面
visualizer({
emitFile: false,
filename: 'stats.html', //分析图生成的文件名
open: true //如果存在本地服务端口,将在打包后自动展示
}),
// 引入mock数据插件,参考https://github.com/vbenjs/vite-plugin-mock
viteMockServe({
// mock数据文件存放的文件夹,相对于项目根目录
mockPath: 'mock',
localEnabled: command === 'serve'
}),
// API自动导入
AutoImport({
imports: ['vue', 'vue-router'],
resolvers: [],
// 根目录下自动生成自动导入的文件auto-imports.d.ts
dts: './auto-imports.d.ts',
// Generate corresponding .eslintrc-auto-import.json file.
// eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
eslintrc: {
enabled: true, // Default `false`
filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
},
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
// 本地服务配置
// server的参数配置:https://cn.vitejs.dev/config/server-options.html
server: {
// IP,default->localhost
// 设置为0.0.0.0,允许局域网内访问
host: '0.0.0.0',
// 端口,default->5173
port: 3000,
// 自动从浏览器打开
open: true
}
}
}
安装unplugin-vue-components
➜ root yarn add unplugin-vue-components --save-dev
yarn add v1.22.17
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning "vite-plugin-mock > @rollup/plugin-node-resolve@13.3.0" has unmet peer dependency "rollup@^2.42.0".
warning "vite-plugin-mock > @rollup/plugin-node-resolve > @rollup/pluginutils@3.1.0" has unmet peer dependency "rollup@^1.20.0||^2.0.0".
warning " > @vue/test-utils@2.3.0" has unmet peer dependency "@vue/compiler-dom@^3.0.1".
warning " > @vue/test-utils@2.3.0" has unmet peer dependency "@vue/server-renderer@^3.0.1".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ unplugin-vue-components@0.24.0
info All dependencies
└─ unplugin-vue-components@0.24.0
✨ Done in 3.11s.
➜ root
配置vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import type { UserConfigExport, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { visualizer } from 'rollup-plugin-visualizer'
import { viteMockServe } from 'vite-plugin-mock'
import AutoImport from 'unplugin-auto-import/vite'
import AutoImportComponents from 'unplugin-vue-components/vite'
// https://vitejs.dev/config/
export default ({ command }: ConfigEnv): UserConfigExport => {
console.log('command', command)
return {
plugins: [
vue(),
vueJsx(),
// 分析,参考https://github.com/btd/rollup-plugin-visualizer
// 执行npm run build时,会自动打开stats.html页面
visualizer({
emitFile: false,
filename: 'stats.html', //分析图生成的文件名
open: true //如果存在本地服务端口,将在打包后自动展示
}),
// 引入mock数据插件,参考https://github.com/vbenjs/vite-plugin-mock
viteMockServe({
// mock数据文件存放的文件夹,相对于项目根目录
mockPath: 'mock',
localEnabled: command === 'serve'
}),
// APIs自动导入,参考https://github.com/antfu/unplugin-auto-import
AutoImport({
imports: ['vue', 'vue-router'],
resolvers: [],
// 根目录下自动生成自动导入的文件auto-imports.d.ts
dts: './auto-imports.d.ts'
}),
// 按需自动引入组件,参考https://github.com/antfu/unplugin-vue-components
AutoImportComponents({
resolvers: []
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
// 本地服务配置
// server的参数配置:https://cn.vitejs.dev/config/server-options.html
server: {
// IP,default->localhost
// 设置为0.0.0.0,允许局域网内访问
host: '0.0.0.0',
// 端口,default->5173
port: 3000,
// 自动从浏览器打开
open: true
}
}
}
参考 https://vitejs.dev/config/build-options.html
具体的配置,参考下面build的注释
import { fileURLToPath, URL } from 'node:url'
import type { UserConfigExport, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { visualizer } from 'rollup-plugin-visualizer'
import { viteMockServe } from 'vite-plugin-mock'
import AutoImport from 'unplugin-auto-import/vite'
import AutoImportComponents from 'unplugin-vue-components/vite'
// https://vitejs.dev/config/
export default ({ command }: ConfigEnv): UserConfigExport => {
console.log('command', command)
return {
plugins: [
vue(),
vueJsx(),
// 分析,参考https://github.com/btd/rollup-plugin-visualizer
// 执行npm run build时,会自动打开stats.html页面
visualizer({
emitFile: false,
filename: 'stats.html', //分析图生成的文件名
open: true //如果存在本地服务端口,将在打包后自动展示
}),
// 引入mock数据插件,参考https://github.com/vbenjs/vite-plugin-mock
viteMockServe({
// mock数据文件存放的文件夹,相对于项目根目录
mockPath: 'mock',
localEnabled: command === 'serve'
}),
// APIs自动导入,参考https://github.com/antfu/unplugin-auto-import
AutoImport({
imports: ['vue', 'vue-router'],
resolvers: [],
// 根目录下自动生成自动导入的文件auto-imports.d.ts
dts: './auto-imports.d.ts'
}),
// 按需自动引入组件,参考https://github.com/antfu/unplugin-vue-components
AutoImportComponents({
resolvers: []
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
// 本地服务配置
// server的参数配置:https://cn.vitejs.dev/config/server-options.html
server: {
// IP,default->localhost
// 设置为0.0.0.0,允许局域网内访问
host: '0.0.0.0',
// 端口,default->5173
port: 3000,
// 自动从浏览器打开
open: true,
// 端口被占用时,是否直接退出
strictPort: false
},
// 打包选项,参考https://vitejs.dev/config/build-options.html
build: {
// 打包后的存放路径,默认就是dist
outDir: 'dist',
// 打包后表态资源存放路径,默认就是assets
assetsDir: 'assets',
// 小于此阈值的导入或引用资源将内联为 base64 编码,以避免额外的 http 请求,设置为0可禁用
// 默认4096
assetsInlineLimit: 4096,
// 设置为false,禁用css代码拆分,全部融合到一个CSS(特别是小项目)
// 默认为true
cssCodeSplit: false,
// 打包时,复制public中的文件到outDir(即dist目录)
copyPublicDir: true,
// 消除打包文件超过500KB的告警,最大允许1M
chunkSizeWarningLimit: 10000,
// Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效
// terser比esbuild压缩的更小,其次可附带其他参数,如去掉注释
// 使用terser,需要安装terser依赖
minify: 'terser',
// 在打包代码时移除 console.log、debugger 和 注释
// 参考;https://terser.org/docs/api-reference#minify-options
terserOptions: {
compress: {
drop_console: false,
drop_debugger: true,
// 只删除console.log,保留其他如console.info
pure_funcs: ['console.log']
},
format: {
comments: false
}
},
// rollupOptions,参考https://rollupjs.org/configuration-options/
rollupOptions: {
// 打包后的文件名
output: {
// 处理表态文件,如css,图片,svg
// [ext]文件后缀,不包含点(.),[extname]文件名后缀,包含点(.),[hash]文件内容的Hash值,[name]原文件名,不包含后缀
assetFileNames: 'assets/[ext]/[hash].[ext]',
// 处理JS
// [format]格式,[hash]文件内容的Hash值,[name]原文件名,不包含后缀
chunkFileNames: 'assets/js/[name]-[hash].js',
entryFileNames: 'assets/js/[name]-[hash].js',
// 手动分包,解决chunk碎片太多的问题,避免太多的js
// 默认情况下,一个vue页面会产生一个js
// 如下,非css的node_modules依赖生成一个js,其他的合并生成一个js(对于小项目来说,完全可这样做,甚至直接生成一个js即可)
manualChunks(id: any, { getModuleInfo }) {
const cssLangs = `\\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\\?)`
const cssLangRE = new RegExp(cssLangs)
const isCSSRequest = (request: string): boolean => cssLangRE.test(request)
// 分vendor包
if (id.includes('node_modules') && !isCSSRequest(id)) {
return 'vendor'
}
return 'manifest'
}
}
}
}
}
}
直接安装less
即可
在用Webpack 时,需要使用 less-loader 去加载 less 文件时,也需要依赖 less 这个包,所以必须先安装 less。只不过在 Vite 中,我们不再需要使用 less-loader 了,但 less 还是得安装
我们知道 postcss 可以对某些 css 属性(比如 user-select)自动添加浏览器前缀。
安装postcss
和postcss-preset-env
yarn add postcss postcss-preset-env -D
项目根目录下创建postcss.config.js
/* eslint-disable no-undef */
module.exports = {
plugins: [require('postcss-preset-env')],
};
stylelint
,支持检测css\less\scss\vue文件安装
yarn add stylelint stylelint-config-standard stylelint-config-standard-scss stylelint-config-recommended-vue postcss-html postcss-less -D
创建配置文件..stylelintrc.js
,内容如下
// https://stylelint.io/user-guide/get-started
module.exports = {
extends: [
'stylelint-config-standard',
'stylelint-config-standard-scss',
'stylelint-config-recommended-vue',
],
rules: {
'unit-no-unknown': null,
// 禁用less @变量检测
'at-rule-no-unknown': null,
'scss/at-rule-no-unknown': null,
},
};
配置package.json
"scripts": {
"style-lint": "stylelint src/**/*.{css,less,vue,scss}",
},
如果需要匹配多级目录,要用下面的写法,否则检测不到
"style-lint": "stylelint src/**/**/**/**/**/**/**/**/**/*.{css,less,vue,scss}",
使用create-vue创建vue3项目,vite,vue3
相对VUE2 ,VUE3做了哪些优化和改进呢?
vue项目,不使用window.location.reload(),如何刷新当前页面?
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
vue2.0 v-html指令有潜在的xss风险,如何解决?
vue项目通过axios怎么下载二进制文件或图片?
ant.design UI框架 同时使用v-model或value属性时, placeholder不显示
如何在VUE项目中添加stylelint,检查css,scss,less的语法问题,保证团队代码的规范统一
VUE全局函数
定义了服务端渲染的属性名称常量SSR_ATTR,定义了一些资产类型常量ASSET_TYPES,定义了生命周期相关钩子函数的函数名称
使用iviewui-admin框架构建管理系统时,遇到的各类问题
vue项目中动态图片路径拼接
vue下filter方法的调用
21个vue顶级UI框架: Vuetify,Quasar,Vue Material,Keen-UI,Buefy,Bootstrap Vue,Muse-UI,AT-UI,Vux,iView,Uiv,Vuikit,Onsen UI+Vue,Semantic UI+Vue,Fish-UI,Mint UI,Framework7 Vue,Cube UI,Vueblu,Ant Design Vue
".vue"文件是如何解析成js对象的~
立个flag,看过年这段时间能不能把vue的源码读完?多年前看过jQuery的部分源码,如果想要更深入的了解vue,还是得从源码开始
vue源码阅读,慢慢学习
vue的生命周期函数
vue组件的数据data为什么一定要是函数 ?
Mint-ui this.$messagebox点取消时,报错:Uncaught (in promise) cancel
vue-validate使用
这就是个vue的坑。。。
vue如何监听enter事件?
vue使用axios进行form表单提交
vue中如何改变title标题
如果在vue2.0中使用NProgress进度条
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。也是vue2.0官方推荐的,同时不再对vue-resource(vue1.0使用)进行更新和维护
分析Vue.js源码
npm run dev模式下,webpack4+vue2项目下,类似'/user/login'二级路由,刷新时静态资源路径不对,静态资源返回404
[Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined"
did you register the component correctly? For recursive components, make sure to provide the "name" option
vue.js如何查看注册了哪些组件,获取组件名称
vue底层的Virtual DOM就是基于snabbdom修改的