vue cli3项目搭建流程

最新推荐文章于 2024-09-04 15:29:17 发布

@小盆友

最新推荐文章于 2024-09-04 15:29:17 发布

阅读量603

点赞数

分类专栏： vue3 文章标签： vue.js

本文链接：https://blog.csdn.net/ShIcily/article/details/123505290

版权

1 篇文章 0 订阅

订阅专栏

简言：

注意：Vue 3.0 项目目前需要从 Vue 2.0 项目升级而来

1.搭建vue的开发环境，安装脚手架工具

sudo npm install -g @vue/cli

2.安装成功后，查看版本是否安装成功

vue -V

最新版是：@vue/cli 5.0.1

3.初始化 vue 项目

vue create vue3-demo

输入命令后，会出现命令行交互窗口；可以选择 Manually select features：

4.之后根据自己的要求选择不同的配置（按 “空格键”选择/取消选择，A键全选/取消全选）

5.进入项目文件夹运行项目

npm run serve

6.vue cli3 图形化界面创建项目

vue ui

执行以上命令，会在浏览器弹出一个项目管理的界面：

6.1 我们可以点击"创建"选项来创建一个项目，选择底部"在此创建项目"，页面上方也可以选择路径

6.2、然后输入我们的项目名称，选择包管理工具为 npm，然后点击下一步：

6.3、根据个人需要进行配置（默认配置或者手动配置）

6.4、接下来就等待完成安装，安装完成管理界面如下：

1、命令行工具 vue-cli（runoob-vue3-test）：

2、Vite（runoob-vue3-test2）

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。 index.css: 样式文件。
static	静态资源目录，如图片、字体等。
public	公共资源目录。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式
dist	使用 npm run build 命令打包后会生成该目录。