# Vue3 脚手架指南 ## 安装指南 Node Version >= 12.0.0 ``` Shell # 安装 $ npm i # 或者 yarn # 运行 $ npm run dev #测试环境 # 构建 $ npm run build # 测试环境构建 $ npm run build:online # 生产环境构建 ``` ## 构建流程 >客户端 (kscpm -- vue3ts) 只需要负责业务层编码的实现 > 服务端 (ksr-vue3 、ksr-serve) 基于koa , koa-webpack封装的 Node service. 封装了Webpack4常用的配置plugin和loader，例如ts-loader、css-loader等，更多请参考 https://www.npmjs.com/package/ksr-vue3 ## 技术栈概述 | | version | plugin or loader | | :---| :--- |:--- | | vue | 3.x | @vue/comiler-sfc、 vue-loader/dist/plugin | |webpack| 4.x | [webpack4](https://www.webpackjs.com/concepts/)| |pug| 3.x | raw-loader 、 pug-plain-loader | |sass | 1.4| sass-loader@7.x 、vue-style-loader@4.x | |typescript| 4.x | ts-loader@8.x | | vue-router | 4.x | [Vue-Router](https://router.vuejs.org/zh/api/)| | vuex | 4.x | [vuex-class](https://www.npmjs.com/package/vuex-class) 、[vuex-module-decorators](https://www.npmjs.com/package/vuex-module-decorators)| | vue decorator | | [vue-property-decorator](https://www.npmjs.com/package/vue-property-decorator) | kpc | ^2.0.0-beta.0 | @king-design/vue | ## 常见问题 ### 1. Vue2 升级 Vue3 问题1: 删除 vue-template-compiler@2 解决方案：由于Vue2 编译Template使用了vue-template-compiler，而Vue3 使用的是 @vue/compiler-sfc ### 2. webpack && ts-loader 依赖关系 4 =< webpack < 5 使用 ts-loader@8 , 推荐8.2.0 webpack >= 5 使用 ts-loader@9 ### 3. SFC渲染中发生的问题 问题1 ：export render not found 解决方案： webpack4.x 稳定版本 vue-loader@16.0.0 ， ps: 很奇怪,v16.8.x 就报错，@vue/compiler-sfc 无法解析到 pug render ### 4. Vuex 问题1 ： 在 chrome 、firefox中，无法唤起 vue-devtools 调试工具 解决方案： vue-devtools工具卸载后升级至 6.X ## vuex vuex-persistedstate