Vue+SpringBoot前后端分离教程一：vue环境及脚手架搭建

我不是女神ヾ 2023-09-29 12:18 23阅读 0赞

### vue环境及脚手架搭建 ###

*  一、环境安装
 *  二、安装cnpm和yarn
 *   *  2.1 安装cnpm
     *  2.2 全局安装yarn
 *  三、安装vue-cli脚手架构建工具
 *   *  3.1 脚手架搭建
     *  3.2 建一个vue项目并运行

# 一、环境安装 #

首先安装node.js  
官方网站：[http://nodejs.cn/download/][http_nodejs.cn_download]

![在这里插入图片描述][e2c2af65c91d4f8f8a31aeec0b45b7ab.png_pic_center]  
点击Windows安装包即可下载

Node安装自带npm环境

可以用如下命令查看是否安装成功

> `node -v`

> `npm -V` **(注意这里是大写V)**

![在这里插入图片描述][24bc893e640c464aaaab5dac36f2f3a1.png]

# 二、安装cnpm和yarn #

1.  安装cnpm和yarn用来替代npm，npm镜像在国外比较慢。
2.  yarn是一个新的JS包管理工具，是为了弥补 npm 的一些缺陷而出现的。  
    如果选择安装yarn也可以不用安装cnpm，二选一即可。

**cnpm地址**：[https://npmmirror.com/][https_npmmirror.com]

## 2.1 安装cnpm ##

拷贝这个命令到cmd并执行

> `npm install -g cnpm --registry=https://registry.npmmirror.com`

官网的使用说明中也有这个命令

![在这里插入图片描述][8cc44ba65a9b485f8b559250c80fa638.png_pic_center]

查看cnpm

> `cnpm -v`

![在这里插入图片描述][5b82cbe6307441d0b6617a43d8e1729c.png]

## 2.2 全局安装yarn ##

> `npm install -g yarn`

安装成功后，同样可以用命令来查看版本号判断是否安装成功

> `yarn -v`

![在这里插入图片描述][db305bfbdaec4a4db6f193d66e585f5b.png]

# 三、安装vue-cli脚手架构建工具 #

## 3.1 脚手架搭建 ##

官网：[https://cli.vuejs.org/zh/][https_cli.vuejs.org_zh]  
官网中也有安装的教程  
![在这里插入图片描述][ff5e4fbff7d54adab3d45230b24c551b.png_pic_center]

**我们可以用如下三个命令中的一个，推荐用yarn**

> `yarn global add @vue/cli`

> `npm install -g @vue/cli`

> `cnpm install -g @vue/cli`

**用下面的其中一个命令来检查其版本是否正确**

> `vue -V`

> `vue --version`

![在这里插入图片描述][13a4bdd146f64e459fe6fe829f4e34cd.png]

## 3.2 建一个vue项目并运行 ##

**（注：项目名中间不能有大写字母）**

**第一步：可以先进入到自己建的文件夹或者目录下**

> `vue create [项目名称]`

![在这里插入图片描述][b1a76c042dd44a3bb22fdc4bc7eaa5ee.png]

**第二步：建议选择第三个选项 Manually select features**  
![请添加图片描述][e48c679324174bf1bd971260f57face1.png]  
然后我们进入到了如下界  
![在这里插入图片描述][21bcf88df204493eb68e7bb87f3459d1.png]  
按空格选择或者取消某个选项  
我们把 **Router** 和 **Vuex** 选上，并把 **Linter/Formatter**去掉  
![在这里插入图片描述][e5862759c04b4ab4af0a1b1f96ffdc7c.png]  
选完之后按回车，可以来到这个界面  
选择3.x ，即 **Vue3.0** 版本  
![在这里插入图片描述][8b6a1cfc4b104eabb5a3d4052b70c001.png]

还有一些小步骤，按照下面的选择即可  
![请添加图片描述][c8b684a0c3d54ecc9e5269e3334951af.png]

![请添加图片描述][259f3d4ce35d4ece905f3389f51fe721.png]  
![请添加图片描述][14132f4ed0e84b5ca144c55fd53dbc3a.png]  
项目目录如下  
![在这里插入图片描述][f73aee87279e40f0ae7bcd80b7b77487.png]

**第三步：进入项目目录并运行**

> `npm run serve`

> `yarn serve`

![在这里插入图片描述][be9a280330914af0b90cece649a38a84.png]

**下一篇：**[Vue+SpringBoot前后端分离教程二：在IDEA中运行vue并结合element-plus的使用][Vue_SpringBoot_IDEA_vue_element-plus]

[http_nodejs.cn_download]: http://nodejs.cn/download/
[e2c2af65c91d4f8f8a31aeec0b45b7ab.png_pic_center]: https://img-blog.csdnimg.cn/e2c2af65c91d4f8f8a31aeec0b45b7ab.png#pic_center
[24bc893e640c464aaaab5dac36f2f3a1.png]: https://img-blog.csdnimg.cn/24bc893e640c464aaaab5dac36f2f3a1.png
[https_npmmirror.com]: https://npmmirror.com/
[8cc44ba65a9b485f8b559250c80fa638.png_pic_center]: https://img-blog.csdnimg.cn/8cc44ba65a9b485f8b559250c80fa638.png#pic_center
[5b82cbe6307441d0b6617a43d8e1729c.png]: https://img-blog.csdnimg.cn/5b82cbe6307441d0b6617a43d8e1729c.png
[db305bfbdaec4a4db6f193d66e585f5b.png]: https://img-blog.csdnimg.cn/db305bfbdaec4a4db6f193d66e585f5b.png
[https_cli.vuejs.org_zh]: https://cli.vuejs.org/zh/
[ff5e4fbff7d54adab3d45230b24c551b.png_pic_center]: https://img-blog.csdnimg.cn/ff5e4fbff7d54adab3d45230b24c551b.png#pic_center
[13a4bdd146f64e459fe6fe829f4e34cd.png]: https://img-blog.csdnimg.cn/13a4bdd146f64e459fe6fe829f4e34cd.png
[b1a76c042dd44a3bb22fdc4bc7eaa5ee.png]: https://img-blog.csdnimg.cn/b1a76c042dd44a3bb22fdc4bc7eaa5ee.png
[e48c679324174bf1bd971260f57face1.png]: https://img-blog.csdnimg.cn/e48c679324174bf1bd971260f57face1.png
[21bcf88df204493eb68e7bb87f3459d1.png]: https://img-blog.csdnimg.cn/21bcf88df204493eb68e7bb87f3459d1.png
[e5862759c04b4ab4af0a1b1f96ffdc7c.png]: https://img-blog.csdnimg.cn/e5862759c04b4ab4af0a1b1f96ffdc7c.png
[8b6a1cfc4b104eabb5a3d4052b70c001.png]: https://img-blog.csdnimg.cn/8b6a1cfc4b104eabb5a3d4052b70c001.png
[c8b684a0c3d54ecc9e5269e3334951af.png]: https://img-blog.csdnimg.cn/c8b684a0c3d54ecc9e5269e3334951af.png
[259f3d4ce35d4ece905f3389f51fe721.png]: https://img-blog.csdnimg.cn/259f3d4ce35d4ece905f3389f51fe721.png
[14132f4ed0e84b5ca144c55fd53dbc3a.png]: https://img-blog.csdnimg.cn/14132f4ed0e84b5ca144c55fd53dbc3a.png
[f73aee87279e40f0ae7bcd80b7b77487.png]: https://img-blog.csdnimg.cn/f73aee87279e40f0ae7bcd80b7b77487.png
[be9a280330914af0b90cece649a38a84.png]: https://img-blog.csdnimg.cn/be9a280330914af0b90cece649a38a84.png
[Vue_SpringBoot_IDEA_vue_element-plus]: https://blog.csdn.net/Q1368089323/article/details/124483619