vue3发布有一段时间了，有心的同学该学起来了，技术红利就在眼前了呢~
由于我也是在正式发布时才刚刚上手希望各位大神如果看出来有错误指出来，咱们共同进步
学习项目git地址:github.com/a1178013314…
项目代码有些超前，跪求给个star
一、技术栈选型
既然是尝鲜当然所有都用最新的了，选型如下
1、vite(替代webpack的工程化框架)
2、vue3
3、vuex
4、vue-router
5、ant-design-vue（还是阿里靠谱，率先出了UI框架）
6、electron（我接下来想抄个钉钉，同时给项目也增加点难度，还能学个新框架）
7、less
tipe:没有选择ts，主要是框架不熟悉，学习期间引入TS徒增烦恼
二、初始项目搭建
0、推荐使用yarn，没有的童鞋百度装一下啦
1、yarn create vite-app vue3-electron-im 项目名称自己可以按喜好改
2、修改package.json，修改完毕后执行yarn安装依赖
"dependencies": {
"ant-design-vue": "2.0.0-beta.9",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.0.0-rc.1",
"concurrently": "^5.3.0",
"cross-env": "^7.0.2",
"electron": "^10.1.2",
"electron-builder": "^22.8.1",
"electron-devtools-installer": "^3.1.1",
"less": "^3.12.2",
"less-loader": "^7.0.1",
"rimraf": "^3.0.2",
"vite": "^1.0.0-rc.1"
}
复制了一份，上面方便复制，下面加注释简单说明一下
"dependencies": {
"ant-design-vue": "2.0.0-beta.9",//我目前使用的是beta.9如果你发现最新版一定要使用最新版，
//这个版本有点小BUG 查询方法执行：
//npm view ant-design-vue versions
"core-js": "^3.6.5",//这个是polyfill的库，在electron环境下可以不用这个库
"vue": "^3.0.0",//这不不用说了吧
"vue-router": "^4.0.0-0",//最新版的router一定要用这个版本有些特性要用到
"vuex": "^4.0.0-0"//同router
},
"devDependencies": {
"@vue/compiler-sfc": "^3.0.0-rc.1",//字面意思 vue3编译器
"concurrently": "^5.3.0",//这个是用来并行运行npm脚本的，后面跟electron结合的时候需要用到
"cross-env": "^7.0.2",//这个是用来配置命令行参数的
"electron": "^10.1.2",//不多说了哈
"electron-builder": "^22.8.1",//electron 支持库
"electron-devtools-installer": "^3.1.1",//electron 支持库
"less": "^3.12.2",
"less-loader": "^7.0.1",
"rimraf": "^3.0.2",//删除文件或文件夹的库，用来构建自动化脚本
"vite": "^1.0.0-rc.1"//也不多说了
}
三、修改vite配置文件，在根目录新建文件 vite.config.js
const { resolve } = require('path')
const root = resolve(__dirname, 'src/render')
const outDir = resolve(__dirname, 'dist/render')
module.exports = {
base: './', //相对路径
port:8095,//devserver的端口
root,//入口目录
outDir,//出口目录
alias: {
// 别名必须以 / 开头、结尾
'/@/': root,
},
optimizeDeps: {
//这里在electron引用node的库的时候要用requier如果用import需要点配置，我个人建议
//不配置这样到底用的哪个环境的库也一目了然
// 这里不加也没事，用 require 的形式就能避开 import 被编译成 /@modules/fs?import
// allowNodeBuiltins: ['electron-is-dev', 'electron-store', 'electron']
},
}
配置文件还有很多其他功能 包括配置proxy等详情请见
https://github.com/vitejs/vite/blob/master/src/node/config.ts
四、修改文件目录
由于要兼顾electron的开发，对项目目录做了一些修改如下
注意文件，注意文件，注意文件，重要的事情说三遍
五、修改main.js
import { createApp } from 'vue'
import App from './App.vue'
import 'ant-design-vue/dist/antd.min.css';//加入antd-vue
import antd from 'ant-design-vue';//加入antd-vue
createApp(App).use(antd).mount('#app')//use一下挂载到实例下成为全局组件
六、修改App.vue验证一下
<template>
<a-button @click="btnClick">点我</a-button>
<a-modal
title="VUE3"
v-model:visible="visible"
>
<p>{{ message }}</p>
</a-modal>
</template>
<script>
import { ref } from 'vue'
export default {
name: "App",
setup() {
const visible = ref(false)
const message = 'Hello vue3'
const btnClick = () => {
visible.value = true
}
setInterval(() => {
console.log(visible.value)
},500)
return {
visible,
message,
btnClick
}
}
};
</script>
说明：template里可能会报错，这个是由于vscode,Vetur这个插件更新不及时引起的，可以不管或者直接禁用这个插件
七、修改index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>驿传</title>
</head>
<body>
<div id="app"></div>
<!-- 主要是修改这一行 --> <script type="module" src="/main.js"></script></body>
</html>
最后给大家推荐一个我弄的vue3的基础代码段，配置好后输入vue3 敲回车会自动生成本项目的一个基础结构供大家开发
{
"vue": {
"prefix": "vue3",
"body": [
"<style lang=\"less\">",
"</style>",
"",
"<template>",
"</template>",
"",
"<script>",
"import {} from 'vue'",
"export default {",
" setup(){",
" ",
" return { ",
" ",
" }",
" }",
"}",
"</script>",
""
]
}
}
预告一下：明天主要学习一下 vue3 composition api，
