使用vue-cli搭建项目

vue2和vue3的创建是一样的，区别是在选择版本是选择2.0即可。

第一步：准备

使用npm的方式安装vue,
需要如下内容：

• node.js环境（npm包管理器）
• vue-cli 脚手架构建工具
• cnpm npm的淘宝镜像

第一步：安装node
从node.js官网下载并安装node，安装过程很简单，一直点下一步就ok了，安装完之后,可以通过node -v查看node版本号，如果出现版本号，说明你安装成功。

第二部：安装npm包管理器
npm包管理器，是集成在node中的，所以安装了node也就有了npm,直接输入 npm -v 命令，显示npm的版本信息。

第三步：
安装vue-cli2 脚手架构建工具（必须在全局中进行安装）
在命令行中运行命令npm install -g vue-cli，然后等待安装完成,，通过vue -V命令来查看版本，如果现实版本，表示安装成功。

升级vue，使用命令：npm install -g @vue/cli
注意：如果报错没权限，可以在npm前面加sudo.

第二部：vue-cli脚手架创建vue项目

（1）初始化项目
创建语法：vue create 项目名称，进入需要创建的项目的文件夹中，创建一个名为“my-test-vue"的项目:

（2）进入到选择配置项

我选择的是“Manually select features”手动选择配置项。

进入到配置项界面，我选择了如下几个选项，（如果不会ts，可以不用选择TypeScript）：

提示：

• 使用空格键选择某一项，
• A键表示选择所有项，
• I键表示反选。
• Enter键会进入下一步。
• 上下键表示上下选择

提示：
第四个选项：Proggressive Web App (PWA) Support表示支持渐进式网络应用程序,详情请参考PWA背景介绍

（3）选择vue.js版本
选择我们vue项目想要使用的vue.js的版本，这里我选择了vue3版本。

（4）是否使用class风格(组件语法)装饰器
选择是否使用class风格装饰器，我选择使用。

提示：如果输入y表示"是",输入N表示"否"
提示：
即原本是：home = new Vue()创建vue实例
使用装饰器后：class home extends Vue{}

(5)Babel与TypeScript一起用于自动检测的填充
选择是否使用Babel与TypeScript一起用于自动检测的填充，我选择Y

(6)路由模式
是不是用history模式来创建路由?这里我选择使用history模式

备注：router中提供hash模式和history模式，详情请查阅https://blog.csdn.net/cplvfx/article/details/107294535

(7)选择使用哪种css扩展语言
这里我选择第一个Sass/SCSS

提示：dart-sass与node-sass的区别，都是用来将sass编译成css的工具。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现.。node-sass 是用 node(调用 cpp 编写的 libsass)来编译 sass；dart-sass 是用 drat VM 来编译 sass；node-sass是自动编译实时的，dart-sass需要保存后才会生效，推荐 dart-sass 性能更好（也是 sass 官方使用的），而且 node-sass 因为国情问题经常装不上。

（8）代码格式化检测
选择 代码格式化检测 ，这里我选择第一项。

（9）代码检查方式
这里我选择第一个：Lint on save保存检查

（10）文件配置方式
第一项表示在专门的单独文件中配置。
第二项表示在package.json中配置。
这里我选择第一项。

（11）是否保存配置
表示上面的我这些配置是否要保存，如果保存了，我以后再新建项目的时候，可以直接选择我当前的配置，不用再一个一个的配。
我这里选择保存。

保存这些配置，我要给它起个名字，下次方便选择。

回车后项目就开始自动配置。
成功后如下：

然后我们使用命令cd my-test-vue进入我们创建的项目文件夹中，然后执行npm run serve，此时项目启动成功。

第三部：上传到git仓库

我们在gitee上面创建了一个空仓库，我们如何把我们本地的vue项目添加到空仓库中呢？
参考文章：https://blog.csdn.net/qq_42238554/article/details/120803532

如下，我们在gitee上面创建了一个空仓库：

1.找到我们刚才创建项目文件夹中，我们使用vue create创建的项目默认会有一个.git文件，就是vue已经帮我们把git初始化好了，相当于在本地文件夹中,右键git bash中执行了git init

在window powershell命令中，进入当前文件夹目录，然后执行命令：
将本地的文件使用git add .添加到本地缓存

然后通过git commit -m 'xxx'提交到本地

将本地仓库与远程仓库关联起来：

再执行pull获取命令：(允许不相关历史提交，并强制合并)

最后再执行push推送命令：

注意：当代码执行不能推送时，可以强制推送：

git push --set-upstream origin master -f

---

2.右键，点击Git Bash Here

此时打开了git bash窗口：

执行git clone (克隆地址,记得复制ssh的地址)

克隆成功如下：

---

意外报错处理：

不幸的是我的项目报错了，如下：

No Xcode or CLT version detected! 报错了，如何解决这个问题：

第一步: 输入xcode-select --print-path查看 command-line tools 的安装路径，不出意外显示的结果应该是/Library/Developer/CommandLineTools

第二步 输入sudo rm -r -f /Library/Developer/CommandLineTools把 command-line tools 从系统移除掉

此时我们再输入xcode-select --print-path查看的时候已经报错了，表示我们已经删除了

第三步: 最后输入xcode-select --install重新安装
安装成功之后，我们可以查看版本：

---

解决上面的问题后，我再重新搭建项目就没有再报错，我们进入到我创建的vue-test3文件夹中，使用npm run serve开始运行项目：

我们在浏览器中输入http://localhost:8080/，此时我们的项目完美搭建成功。

打开目录显示如下：

由于我配置的是使用TypeScript，所有里面所有的js使用的是ts。(ts是js的超集，所以ts里面支持所有的js脚步)