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原理分析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){
}
版权声明:
作者:wuhou123
链接:https://wuhou.fun/93.html
来源:前端网
文章版权归作者所有,未经允许请勿转载。

共有 0 条评论