【vue3】Vue3 + Vite 项目搭建

Vue3 + Vite 项目搭建

  1. 创建项目
  2. 添加Vue Router 4路由配置
  3. 添加Vant UI 组件库
  4. 移动端rem适配
  5. 添加iconfont字体图标库
  6. 二次封装Axios请求库
  7. 添加CSS预处理器Less
  8. 添加全局状态管理插件Vuex

1.创建项目 Vite方式

1.1 进入开发目录, 执行指令创建新项目

更行node版本18+

npm 7.x版本 sudo npm create vite@latest myy-vue-app -- --template vue

1.2 进入myy-project-app目录, 安装依赖,启动项目

cd myy-project-app

sudo npm install 或者 sudo npm install --legacy-peer-deps ---> sudo chown -R 501:20 "/Users/moyanying/.npm"

sudo npm run dev

1.3 打开浏览器,地址栏输入 http://localhost:3000

2. 添加Vue Router 路由配置

2.1 开发目录myy-project-app下, 执行指令添加路由插件库Vue-Router

sudo npm install vue-router@next

2.2 进入src目录, 新增目录router,新增index.js文件

复制代码
2.3 src目录下,新建views目录,views目录下,新建Home.vue组件	
复制代码
2.4 打开App.vue文件,添加router-view 组件	
复制代码
2.5 打开main.js文件, 引入路由实例
复制代码
2.6 运行指令, 重启项目
	npm run dev

3. 添加Vant UI 组件库 Vant3版本

3.1 开发目录myy-project-app下, 执行指令添加Vant UI 组件库

sudo npm install vant@3 -S

3.2 添加组件按需引入插件

sudo npm install babel-plugin-import -D

3.3 根目录下, 新建babel.config.js文件

复制代码
3.4 在main.js文件中引入Button组件, 验证是否可用
复制代码
3.5 在Home.vue组件中添加Button组件
复制代码
3.6 启动项目,查看效果
3.7 添加样式按需引入插件
	sudo npm install vite-plugin-style-import -D
3.8 修改vite.config.js文件	
复制代码
修改VantResolve方法返回的路径	
复制代码
3.9 删除main.js中全局引入样式的代码,重启项目, 验证样式

3.10 未生效问题:
	01: consola问题:   删除import consola from 'consola';
					删除consola.wrapConsole();      
					其余consola 改为 console
	02: 样式按需引入路径问题
	03: require问题: 

4. 移动端rem适配

4.1 根目录下安装插件

postcss-pxtorem: 将px单位转换为rem单位

lib-flexible: 设置rem基准值, 将HTML的font-size属性值根据手机的分辨率进行适配

sudo npm install postcss-pxtorem lib-flexible

4.2 根目录下,新建postcss.config.cjs文件

复制代码
4.3 在main.js文件中引入lib-flexible插件
复制代码
4.4 修改Home.vue, 添加样式	
复制代码
4.5 重启项目, 验证是否转换为rem, 手机预览模式看是否适配

5. 添加iconfont字体图标库

5.1 iconfont官网注册账户

5.2 单击"资源管理" ---> "我的项目" ---> "新建项目", 设置配置参数

复制代码
5.3 添加一个图标到购物车, 并在购物车中加入项目
复制代码
5.4 选择"我的项目" ---> "我发起的项目", 复制链接, 在项目index.html文件中引入该链接
复制代码
5.5 修改Home.vue文件,在该页面中添加home图标

5.6 给home图标添加样式,修改font-size验证

5.7 如果想添加更多图标,可以在iconfont图标库内自行添加, 或让设计师将设计好的图标转换成svg格式导入iconfont图标库

6. 二次封装Axios请求库

6.1 安装Axios

npm install axios

6.2 在src目录下新建utils目录, 在utils目录下新建axios.js文件

7. 添加CSS预处理器Less

7.1 安装Less和less-loader插件

npm install less less-loader -D

7.2 在src目录下新建theme目录,theme目录下新建custom.less文件

复制代码
7.3 修改Home.vue文件,验证Less是否生效

8. 添加全局状态管理插件Vuex

8.1 根目录下, 执行指令添加状态库Vuex

npm install vuex@next

8.2 src目录下新建store目录, store目录下新建index.js state.js actions.js mutations.js 几个文件

复制代码
8.3 在main.js中引入store抛出的实例
复制代码
8.4 修改Home.vue组件, 验证Vuex是否生效
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/47df2626bb1d4069acffa5667939ef53.jpeg)

8.5 安装官方提供的Vue开发工具 Vue.js devtools
GitHub官网下载安装, 打开浏览器控制台验证
相关推荐
coder_pig11 分钟前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少18 分钟前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder19 分钟前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix30 分钟前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句30 分钟前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易31 分钟前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟38 分钟前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子44 分钟前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
Whoisshutiao1 小时前
网安-XSS-pikachu
前端·安全·网络安全
惊鸿2871 小时前
Taro3+小程序Canvas动态生成海报和二维码分享到朋友圈
前端