vuecli-vite-vue3-init 项目架子 快速开发 webpack打包
要vite的开发的快速 和 webpack打包
开发的时候 用vite,可以打包一个本地可以直接双击,不用起服务的代码
这个架子的缺点就是 vite和vuecli 两套双配置
正式公司项目 还是vuecli吧~
1. 现件个vuecli的架子
vue create vuecli-vue3-init
得到 package.json
{
"name": "vuecli-vue3-init",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-router": "^4.0.3"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-standard": "^6.1.0",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-vue": "^8.0.3"
}
}
2 生成个vite的架子
文档地址: https://cn.vitejs.dev/guide/#trying-vite-online
执行命令
npm create vite@latest
得到 package.json
{
"name": "vite-vue3-init",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.25"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.3.3",
"vite": "^2.9.9"
}
}
3 已 vuecli-vue3-init 为初始架子 合并 vite-vue3-init
- 创建 vuecli-vite-vue3-init 目录,
- 将 cli的文件 除了 node_modules 以外都copy进去,
- 然后合并 package.json 依赖
- 修改script 运行脚本选项
- 删除 package-lock.json
- 安装依赖 yarn install
经过一通调试 里面有个es5的小插曲,在jsconfig.json 里面的 compilerOptions 的 target 原来是es5,导致vite-dev 不能识别vite.config.js里面的const,最后改成es6了。
4 代码提到gitee上 vuecli-vite-vue3-init
贴下最后改的代码
项目名称: vuecli-vite-vue3-init
package.json
{
"name": "vuecli-vite-vue3-init",
"version": "0.1.0",
"private": true,
"scripts": {
"vuecli-dev": "vue-cli-service serve",
"vuecli-build": "vue-cli-service build",
"vuecli-lint": "vue-cli-service lint",
"vite-dev": "vite",
"vite-build": "vite build",
"vite-preview": "vite preview"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-router": "^4.0.3"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vitejs/plugin-vue": "^2.3.3",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-standard": "^6.1.0",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-vue": "^8.0.3",
"vite": "^2.9.9"
}
}
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
base: './',
resolve: {
// 配置路径别名
alias: {
'@': path.resolve(__dirname, 'src'),
_c: path.resolve(__dirname, 'src/components')
}
}
})
vue.config.js
const { defineConfig } = require('@vue/cli-service')
const path = require('path')
const resolve = (dir) => path.join(__dirname, dir)
module.exports = defineConfig({
publicPath: './',
transpileDependencies: true,
// 打包时不生成.map文件
productionSourceMap: false,
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src')) // key,value自行定义,比如.set('@@', resolve('src/components'))
.set('_c', resolve('src/components'))
config.plugin('html').tap(args => {
args[0].title = '自定义标题'
return args
})
},
})
jsconfig.json
{
"compilerOptions": {
"target": "es6",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
}
.eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/vue3-essential',
'@vue/standard'
],
parserOptions: {
parser: '@babel/eslint-parser'
},
rules: {
'no-unused-vars': 'off',
'no-tabs': 'off',
singlequote: 'off',
semi: [2, 'never'],
'comma-dangle': 0,
'no-console': 0,
quotes: [2, 'single'],
'no-undef': 0,
'no-debugger': 0,
'import/no-unresolved': 0,
'import/extensions': 0,
'no-param-reassign': 0,
'vue/multi-word-component-names': 0,
'vue/no-multiple-template-root': 0,
'import/no-extraneous-dependencies': 0
}
}
感谢 viewui-plus 提供的灵感
收工!
---------------------------------------------
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
https://pengchenggang.gitee.io/navigator/
SMART原则:
目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
https://pengchenggang.gitee.io/navigator/
SMART原则:
目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)