之前做的项目是在已经搭建好的项目上直接进行开发，这两天不是很忙，就打算自己过一遍搭建流程。现在把自己的搭建过程分享出来给有同样困扰的同学。

1、安装Vue 3.0

在这之前需要安装Node.js和npm，这部分网上有很多资料。

有了环境之后，我们新建一个项目文件夹，路径中最好不要有中文。我们在文件夹中按住Shift然后鼠标右键，选择打开Powershell或者cmd。

之后可以输入命令安装vue了，在这里有两种安装方式，全局安装和局部安装。全局安装的话以后再次搭建新项目的时候就不需要再安装vue了。

1.1、全局安装（推荐）

在上一步打开的Powershell或者cmd中输入npm install -g @vue/cli，这里面的g是global，也就是全局安装的意思。接着等待就行了。

安装好后可以通过输入vue -V查看是否安装成功。

1.2、局部安装

把-g改为-i就可以。

2、直接使用vue-ui搭建项目

使用vue-ui可以省很多事，我是认为搭建工具就是个工具，没必要花很大的精力去做繁琐的配置工作。使用vue-ui快速便捷，去掉了很多操作，省了时间，何乐不为。

直接在刚才的Powershell或者cmd中输入vue ui

2.1、搭建项目

直接点击页面左下方的更多，打开vue项目管理器

然后点击这个创建，选择你要建的文件夹，然后点击下面的在此创建新项目

输入你的项目名，下一步。在包管理器这里可以选择npm或者yarn，我选择了yarn

新手直接默认配置就可以了

然后点一下创建，等圈圈转完，这个项目就搭建好了，是不是很简单了。

3、运行项目

重新在你的项目文件夹中打开Powershell或者cmd，直接输入yarn serve或者npm run serve就可以运行了。然后在你浏览器输入这个local地址就可以打开了demo了。

完整从零开始搭建一个Vue3.0项目相关推荐

教你使用Python从零开始搭建一个区块链项目！
你是否会和我一样,对加密数字货币底层的区块链技术非常感兴趣,特别想了解他们的运行机制. 但是学习区块链技术并非一帆风顺,我看多了大量的视频教程还有各种课程,最终的感觉就是真正可用的实战课程太少. 我喜 ...
vue3.0项目搭建全过程
新建一个vue3.0项目,主要有以下8个步骤,所有步骤均在终端内完成 [1] 升级vue-cli项目至 vue/cli4.0以上先卸载 npm uninstall vue-cli -g 全局安装脚手 ...
还没搭建过Vue3.x项目？几行代码搞定~
大家好,我是若川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
认识vue3.0项目的目录结构
上一篇笔记新建一个vue3.0项目新建项目后,用vscode打开,会看到项目目录,如下图来看看我们新建的项目里有哪些内容 node_modules npm 加载的项目依赖模块 public 用于 ...
从零开始搭建一个管理系统-vue3.0项目创建-----1
从零开始搭建一个管理系统-vue3.0项目创建-----1 讲在前面 webpack构建项目代码编辑器依赖修改码云代码地址讲在前面假设你已了解关于 HTML.CSS. JavaScript ...
vite 搭建 Vue3.0项目
vite 搭建 Vue3.0项目 vue3.0+TS+AntDesignVue项目 vite 初始化vite项目配置项目配置typescript 配置Vue Router 配置Vuex 配置Ant ...
从零开始搭建一个react项目
Nav logo 120 发现关注消息 4 搜索从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...
从零开始搭建一个vue项目 -- vue-cli/cooking-cli（一）
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...
github项目怎么运行_利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...

完整从零开始搭建一个Vue3.0项目