3、使用Vite+Vue3搭建一个简单项目

前提条件

搭建环境需要使用node,npm,还需要自己装vite环境,如果没有的去装一下
链接: Node.js官网
链接: Vite官网

创建命令及截图过程

进入你需要装项目的文件夹下,在路径位置输入cmd打开命令行
3、使用Vite+Vue3搭建一个简单项目_第1张图片

1、创建项目npm init vite yourProjectName

名称一般都是全小写
在这里插入图片描述

2、选择你要用的框架,这里我们选择vue

3、使用Vite+Vue3搭建一个简单项目_第2张图片

3、我没有用ts,这我依旧选的vue,之后可以根据个人爱好选择使用ts

3、使用Vite+Vue3搭建一个简单项目_第3张图片
3、使用Vite+Vue3搭建一个简单项目_第4张图片在这里插入图片描述
创建成功后,你的文件夹中就有这个项目了

4、cd yourprojectname进入项目根目录

在这里插入图片描述

5、初始化项目npm install

3、使用Vite+Vue3搭建一个简单项目_第5张图片

6、打开VSCode(当然其他的软件也可以),点击文件,点击打开文件夹,选择刚刚建立的项目文件夹

3、使用Vite+Vue3搭建一个简单项目_第6张图片

7、此时项目文件内容为下图

3、使用Vite+Vue3搭建一个简单项目_第7张图片

8、使用npm run dev运行项目

能看到,本地localhost可以访问
3、使用Vite+Vue3搭建一个简单项目_第8张图片

9、但是Networker没有显示,这时,我们需要打开package.json文件,找到"dev": "vite"这行代码,在后面添加--host 0.0.0.0

3、使用Vite+Vue3搭建一个简单项目_第9张图片3、使用Vite+Vue3搭建一个简单项目_第10张图片

10、再次重新运行npm run dev项目

3、使用Vite+Vue3搭建一个简单项目_第11张图片

11、使用浏览器访问http://localhost:3001/,出现下面这个就是成功了

3、使用Vite+Vue3搭建一个简单项目_第12张图片

后续需要eslint,router,vuex等其他的再添加,详情可见https://blog.csdn.net/qq_44035882/article/details/125619395
这里就创建了一个很轻量vue3框架

你可能感兴趣的:(vue,前端,vue.js,javascript)