Springboot+Springsecurity+vue+jwt前后端分离项目实战(二)：创建前端Vue项目

教程目录

Springboot+Springsecurity+vue+jwt前后端分离项目实战(一)：项目简介
Springboot+Springsecurity+vue+jwt前后端分离项目实战(二)：创建前端Vue项目

1、创建vue项目

1.1、vue官网

https://cn.vuejs.org/

1.2、新建文件夹

新建文件夹位置可以根据自己意愿操作，我这里在F盘目录下新建了一个actual_combat文件夹用于保存项目。

注：所有文件夹的名字最好使用英文，养成一个良好习惯，规避不必要的错误。

1.2、开始项目搭建

双击刚刚创建的文件夹，然后鼠标移动到地址栏那块，鼠标左键单击一下如下：

输入cmd后回车，弹出命令窗口如下：

注：如果对于上述操作不熟悉的同学，可以直接快捷键Windows+R，然后输入cmd也是一样的，弹出cmd窗口后，cd到自己创建的文件夹里。

输入vue create 前端项目名称，我这里输入为：vue create black_easy_ui
然后敲击回车键

下图用上下左右的键，用下移键移到：Manually select features 回车

回车进入到如下界面，键盘上、下键移动选择需要的项，按 空格 键可以选中。我们选择如下带*的项目，然后 回车

选项说明
		Choose Vue version：选择vue版本
		Babel：将ES6编译成ES5
		TypeScript：使用TypeScript
		Router和Vuex`：路由和状态管理
		Linter/ Formatter：代码检查工具
		CSS Pre-processors：css预编译

选择3.x回车

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y
路由使用历史模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

y回车

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 使用什
么css预编译器？

选择 Sass/SCSS (with node-sass)

Pick a linter / formatter config: 选择语法检测规范
eslint w…: 只进行报错提醒；
eslint + A…: 不严谨模式；
eslint + S…: 正常模式； eslint + P...: 严格模式；

选择 ESLint with error prevention only
这里忘记既然图了尴尬-。-

Pick additional lint features：代码检查方式：

选择 Lint on save 保存时检查

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)选择配置信息存放位置，单独存放或者并入package.json

选择 In dedicated config files

Save this as a preset for future projects? (y/N)是否保存当前预设，下次构建无需再次配置

选择 n

回车，等待下载依赖

出现如下图，表示安装成功

cd black_easy_ui 回车

npm run serve 回车

成功启动如下图所示：

浏览器地址输入： http://localhost:8082/
看到如下页面表示项目创建成功