vue3 vite项目开发

前言

之前一直使用的是vue2配合element-ui，由于vue3放弃ie，对于业务有兼容要求的框条，迟迟没有使用vue3，最近想着要用vue3开发H5项目了，那就开始熟悉熟悉吧。

vue3对比vue2

Vue3中使用了ES6提供的 Proxy API取代了之前defineProperty来实现对数据的侦测,Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等），该api不支持ie全系列，也无法用js方法替换，所以基本与ie无关了。

在vue2中监测数组的变化是改写了数组的7个原型方法，这样带来好处是不用每个元素挂载方法监听，但是有一定的缺陷，比如数组下标元素变化和数组长度变化，arr[index] = value, arr.length = length

还有就是defineProperty属性定义方法，对新属性和获取一些属性无法监听。target[newKey],target.length等

vue3通过对外层对象代理，可以代理数组变化，也有属性访问的方法，具体的等后面看完文章再总结。

vite原理

Vite 一个基于浏览器原生 ES Module imports 的 Web 开发构建工具。在开发环境下基于浏览器原生ES imports 开发，在生产环境下基于Rollup打包。

它主要具有以下特点：

• 快速的冷启动
• 即时的模块热更新
• 真正的按需编译

其最大的特点是在浏览器端使用 export、import 的方式导入和导出模块，在 script 标签里设置 type="module"，浏览器会识别所有添加了type='module'的script标签，对于该标签中的import关键字，浏览器会发起http请求获取模块内容。

普通vue-cli4.0搭建

此为老的vue-cli脚手架搭建，后面有vite构建工具搭建

npm init 在项目中引导创建一个package.json文件 常用 npm init -y 直接自动生成
npm config 管理npm的配置路径
npm config set <key> <value> [-g|--global]
npm config get <key>
npm config delete <key>
npm config list
npm config edit
npm get <key>
npm set <key> <value> [-g|--global]


例如在公司内网，因为公司的防火墙原因，无法完成任何模块的安装，这个时候设置代理可以解决
npm config set proxy=http://xxx.com:8080


又如国内的网络环境问题，某官方的IP可能被和谐了，幸好国内有好心人，搭建了镜像，此时我们简单设置镜像
npm config set registry="http://r.cnpmjs.org"


也可以临时配置，如安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org


npm cache 管理模块的缓存
最常用命令清除npm本地缓存
npm cache clean


npm/cnpm安装模块时候情况如下：
1、正常安装：npm install [模块] -S/-D常用选项
2、指定版本安装：npm install [模块]@版本 -S/-D常用选项
-S, --save 安装包信息将加入到dependencies（生产阶段的依赖）
-D, --save-dev 安装包信息将加入到devDependencies（开发阶段的依赖），所以开发阶段一般使用它
-O, --save-optional 安装包信息将加入到optionalDependencies（可选阶段的依赖）
-E, --save-exact 精确安装指定模块版本


安装新版本之前一般建议卸载之前的老版本vue-cli：
npm uninstall vue-cli -g
#or
yarn global remove vue-cli


对于Vue 3，您应该使用Vue CLI v4.5 @vue/cli。要升级，您需要在@vue/cli全局重新安装最新版本
yarn global add @vue/cli
# or
npm install -g @vue/cli


然后在Vue项目中运行
vue upgrade --next


创建项目
vue create <Project Name> // 文件名 不支持驼峰（含大写字母）

vite项目搭建

npm install vue@next 
npm init vite <project-name> -- --template vue 
cd project-name 
npm install 
npm run dev

常见问题

由于vue3升级频繁，导致依赖包会出现升级版本问题

1.  export 'useStore' was not found in 'vuex'

升级vuex到最新4.x版本

2. ::v-deep usage as a combinator has been deprecated. Use ::v-deep(＜inner-selector＞) instead

将v-deep后子孙元素包裹

.one ::v-deep .two{
}
// 更改
.one ::v-deep(.two){
}