SpringBoot +Vue2.x版本项目开发第一步 项目的搭建

 

参考教程（推荐！！！）：

IDEA中Vue的安装和使用（最全篇）

Nodejs安装及环境配置

vue3.x版本参考我的另一篇教程（超级详细！）：

https://blog.csdn.net/qq_44787993/article/details/106826346

1.node.js安装成功后测试：

node -v 为查看node版本

npm -v 查看 npm 版本 ，npm（包管理和分发工具）用来来安装依赖包。

npm root  -g 查看各种依赖包的默认存放路径

2.在node安装目录新建两个文件夹，node_cache和node_global

 

修改默认路径通过如下命令：

//修改全局变量安装位置
npm config set prefix=".\nodejs\node_global"

//修改缓存安装位置
npm config set cache =".\nodejs\node_cache"

 

我的安装如下：

安装后的文件夹：

 

3.安装npm的阿里镜像，原生npm下载依赖包过慢，镜像可以提高下载效率。

npm i -g cnpm --registry=https://registry.npm.taobao.org

4.使用cmd命令行创建Vue项目，首先创建一个项目存放的文件夹，这里我把项目放在 D:\myVue 里面，进入该目录，依次执行一下命令：

1）安装Vue的脚手架工具vue-cli，（！！！后续修正，这里要注意，使用npm - -g vue-cli安装的vue版本是2.X而现在vue已经升级到4.X了，所以想要安装vue3.X及以上版本应使用npm install -g @vue/cli,就不要后续再升级了！！！，我好恨！！！）

npm i -g vue-cli
测试是否安装成功：
vue -V    //注意：-V是大写的V，不是小写的v

我的安装如下：

 

2）安装webpack工具

cnpm install -g webpack

我的安装：分别是开始安装和安装结束

3）基本工具安装完成后，开始创建项目

指令：vue init webpack 项目名

我的创建：

Project name ->项目名

Project description->项目描述

Author->作者

Vue build standalone->直接enter

Install vue-router->选择yes

Use Eslint to lint your code->是否将代码格式化，适合团队开发，新手不适应，我选择No

Set up unit tests->yes

Pick up a test runnner->直接Enter

Set e2e tests with Nightwatch?->yes

Should we...->yes

4)进入项目所在目录，输入cnpm run dev 运行

我的项目目录：

cmd 命令：

 

5）在浏览器输入：localhost:8080访问,出现一下画面则创建成功!