vue3 vite项目开发

前言

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

前提应该懂下面基础知识:
下载node.js 下好后自带npm 命令 终端查看命令 npm -v 即可看到安装版本
安装淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org

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打包。

它主要具有以下特点:

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

其最大的特点是在浏览器端使用 exportimport 的方式导入和导出模块,在 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
来源:前端网
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录