Vue3入门之创建vue3的单页应用(vite+vue)

Vue3入门之创建vue3的单页应用(vite+vue)

引用

CSDN

1.

https://m.blog.csdn.net/mo_sss/article/details/140269962

Vue3入门之创建vue3的单页应用(vite+vue)

Vite构建vue3的单页应用

1. 命令执行的位置

先cd到一个目录，这个目录是接下来创建的项目所在的目录。例如：

F:\STUDY\Front\Vue\VueProjects\VueTest01

2. 创建项目

这里不需要先安装vue，直接使用npm命令进行项目的创建。创建的项目将使用基于 Vite 的构建设置，并允许我们使用 Vue 的单文件组件 (SFC)。

npm create vue@latest

该命令会先安装最新版本的create-vue脚手架然后创建单页应用项目。输入y后回车。

3. 填写项目信息

如果不想自己输入可直接使用默认的参数即可，直接回车。以下是项目配置示例：

• 输入项目名称
• 是否使用TS语法：否
• 是否启用JSX支持：否
• 是否引入Vue Router进行单页应用开发：是
• 是否引入Pinia用于状态管理：否
• 是否引入Vitest用于单元测试：是
• 是否引入一款端到端测试工具：不需要
• 是否引入ESLint用于代码质量检测：否
• 是否引入Vue DevTools 7扩展用于调试：否

此时项目初始化完成，可以使用vscode工具打开项目vue-project。

4. 运行项目

根据命令窗口中的绿色命令操作运行项目。进入项目目录：

cd vue-project

安装项目模块，这一步执行结束后，项目目录中会多一个node_modules文件夹，该文件夹中就是下载的项目的依赖模块：

npm install

运行项目：

npm run dev

执行完以上命令后，项目启动成功。

5. 访问项目

访问地址：

http://localhost:5173

访问界面如下，即表示项目成功访问。

6. 关闭项目

如何关闭项目：

在命令窗口界面ctrl+c即可停止项目运行，或者直接关闭运行的命令窗口。

7. 使用vscode运行项目

在vscode的左上角的菜单栏中找到Terminal终端，选择New Terminal新建终端。

在终端窗口中执行安装模块命令（如果已经安装过了就省略这一步）：

npm install

再执行运行项目的命令：

npm run dev

执行后界面如下，可通过链接访问项目（按住ctrl键点击鼠标左键即可跳转）。

在vscode中关闭运行的项目一样是用ctrl+c，然后输入Y回车即可。也可以选择在终端右侧上面的垃圾桶按钮进行关闭运行的服务。

8. 构建版本

项目发布到生产环境前，构建版本，执行以下命令会生成一个./dist文件夹：

npm run build