阅读 98

VUE3 项目开发实战入门系列 (1.-初始化项目)

初始化项目

vue3官方提供了两种初始化项目的方式,分别是Vite和vue-cli,两个都可以作为Vue3项目的脚手架工具来帮助我们快速创建项目,Vite对比vue-cli或者各类基于webpack的脚手架工具来说,最大的优点就是快速的服务器预编译能力和热更新能力,不用在开发时每修改一个地方刷新需要等上半天,所以在以下的项目中我们会选择Vite作为脚手架工具。

  • Vite: 是基于浏览器原生ES modules (import / export)实现的开发服务器,在开发环境下,使用浏览器端解释imports,服务器端按需编译返回,跳过了打包的概念,这种思路的实现得益于浏览器端对于ES modules 日渐成熟的支持,而最后的生产环境则使用 Rollup 来进行打包(关于为什么使用Rollup?)。

  • vue-cli: 是基于webpack来实现模块化编译打包。

关于Vite的更多详细介绍可以查看Vite官网

章节内容:

  1. 安装项目
  2. 安装依赖

安装项目

通过Vite安装项目

# npm 6.x
npm init @vitejs/app ctcode-vue3 --template vue

# npm 7+
npm init @vitejs/app ctcode-vue3 -- --template vue
复制代码

或者

yarn create @vitejs/app my-vue-app --template vue
复制代码

这里作者使用的是npm 6.x的命令,后续涉及安装依赖都使用npm。

查看项目项目创建完毕后的目录结构

- ctcode-vue3
	- public 			// 公共资源文件夹
	- src				// 主要开发目录
	- .gitgnore			// git忽略文件
    - index.html		// app首页
	- package.json		// 项目配置文件
	- vite.config.js	// vite配置文件
复制代码

安装依赖

接下来安装项目依赖的第三方包,进入项目目录

cd ctcode-vue3
复制代码

下载安装所有依赖包

npm install
复制代码

或者

yarn install
复制代码

启动项目

npm run dev
复制代码

项目启动后默认端口是 :3000,可以打开 http://localhost:3000 查看效果啦~!

image20210220140951577.png

到这里项目就创建成功了。

查看代码:

git clone https://github.com/chitucode/ctcode-vue3.git (已下载可直接checkout)
git checkout v1.0 
复制代码

好友微信号

添加大佬微信 和上千同伴一起提升技术交流生活

hsian_`

最后

码字不容易 你的点击关注点赞留言就是我最好的驱动力

文章分类
前端
文章标签