springboot+Vue从零开始到乐意购商城系统搭建（一）之前端_Vue.js环境搭建

前言

博主用业余时间在开发一个乐意购商城系统，目的是为了提高一下自己的技术栈区，同时也是为了巩固一下平时所学所思的东西，为了以后可以从容面对在工作中的相关问题和技术，这个商城系统以后会越做越大，因此在布局上用到了可以很好开发大型商城项目的前端热门Vue.js框架，后端用灵活便用的springboot框架后端还用到了mybatis-plus增强版框架，以后会上传项目到github上，于此同时会不断把技术分享出来，供大家参考，第一篇先把前端Vue.js环境搭建起来。

安装node.js

1.进入Node.js官网: https://nodejs.org/en/，选择下载12.14.0LTS版本并安装Node.js。

2.进行安装详细操作：






3.安装完成之后，到cmd终端测试一下，按win+R 输入：cmd打开cmd窗口，执行指令：node -v 出现v12.14.0说明安装成功！

4.npm包管理器集成在Node.js中，安装Node.js时自带了npm，输入npm -v可以查看npm版本 提示：-v的意思是指版本的意思version

5.输入npm -g install npm,更新npm到最新版本，不过我的已经是最新版本。

安装cnpm

6.执行命令npm install -g cnpm --registry=https://registry.npm.taobao.org，使用npm的国内镜像（npm国内镜像地址：https://npm.taobao.org/由淘宝团队提供的）cnpm代替默认的npm的好处是，可以增加依赖包加载速度且避免资源限制。

cnpm安装vue-cli脚手架（作用：自动生成vue.js+webpack的项目模板）

7.在命令行中运行命令 cnpm install -g vue-cli 安装脚手架

8.将vue项目建立在你自己方便的文件夹下，我是建立在D:\mywork\vue-webpack下，可以利用命令进入此目录，在cmd中输入D：回车即可进入D盘，把对应目录输进去则进入D:\mywork\vue-webpack路径目录下：

然后在输入新建项目命令vue init webpack lyg-vue,执行后会自动生成vue项目，注意这里填写自己的项目名称：lyg-vue。

安装项目依赖

9.上面的脚手架还不能直接运行，需要加载上项目需要的依赖包才能运行，在cmd中输入cd D:\mywork\vue-webpack\lyg-vue,先进入D:\mywork\vue-webpack\lyg-vue，再输入命令：cnpm install 安装项目所需要的依赖包。
（提示：在下载第三方开源项目运行的时候，有时会遇到奇怪的报错，然后通过先执行cnpm rebuild node-sass，后执行cnpm install解决，此步骤不是必须的。）

运行项目

到这所有相关准备完毕，只需看vue运行效果了！
在cmd中，若没进入项目目录下，则输入cd D:\mywork\vue-webpack\lyg-vue,先进入D:\mywork\vue-webpack\lyg-vue，再输入命令：npm run dev 运行完毕后 提示地址为：http://localhost:8084。vue项目运行成功！

浏览器访问项目

运行成功后，去谷歌浏览器访问最后提示的地址：http://localhost:8084，即可看到效果如图：

备注

经过以上步骤完成了Vue项目的脚手架搭建，而用前端vue开发使用的开发工具选择的是Visual Studio Code ，这个前端开发框架很美观，而且免费，深度集成了终端，可以在上面运行命令，而且是响应式的，只要你敲一行代码，按ctrl+s保存，如果有报错了，会立马提示错误。 开发工具下载地址：https://code.visualstudio.com/提供可以自行下载。
一般只需关注src就行，简单看下页面如下：

如果还有接下来前后端分离，跨域，以及简单的前后端登陆功能需要实现的，可以关注我，下篇就是：springboot+Vue从零开始到乐意购商城系统搭建（二）之前后端分离跨域——简单登陆功能实现。