文章目录

一、安装 Vue CLI
二、构建前端项目
- 2.1.创建一个基于 webpack 模板的项目
- 2.2. 安装图解
- 2.3. 项目结构总览
- 2.4. 运行项目
- 2.5. 浏览器验证

项目GitHub 地址： https://github.com/Antabot/White-Jotter

在动手操作之前，我希望大家已经清楚什么是 “前后端分离” ，什么是 “单页面应用” 。

简单地说：
前后端分离的核心思想是前端页面通过 ajax 调用后端的 restuful api 进行数据交互，而单页面应用（single page web application，SPA），就是只有一张页面，并在用户与应用程序交互时动态更新该页面的 Web 应用程序。

附上 Vue 的官方教程：
https://cn.vuejs.org/v2/guide/

一、安装 Vue CLI

因为需要使用 npm 安装 Vue CLI，而 npm 是集成在 Node.js 中的，所以第一步我们需要安装 Node.js，node.js官网：https://nodejs.org/en/download/，首页即可下载。

下载完成后运行安装包，一路下一步就行。然后在 cmd 中输入 node -v，检查是否安装成功。

如图，出现了版本号（根据下载时候的版本确定），说明已经安装成功了。同时，npm 包也已经安装成功，可以输入 npm -v 查看版本号

输入 npm -g install npm ，将 npm 更新至最新版本。

之后可以选择安装 cnpm，即 npm 的国内镜像。使用 cnmp 的好处是在日后下载内容时会比较快，但是下载的包可能不是最新的。

安装 cnpm 的命令为：

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

完成后就可以使用 cnpm 替代 npm 了，喜欢用的小伙伴注意一点，cnpm 不要与 npm 混合使用，一个项目用 cnpm 就从头用到底，不要中途敲错命令，否则就会出现混乱。不过万一遇到这种情况也不用慌，把项目的 node_modules 文件夹删了重新执行 npm/cnpm install 就行了，只是比较浪费时间。
之后，使用 npm install -g vue-cli 安装脚手架。

接下来，就可以搭建我们的前端项目了。

二、构建前端项目

2.1.创建一个基于 webpack 模板的项目

直接使用命令行vue init webpack wj-vue构建项目。
首先，进入到我们的工作文件夹中(我的工作空间 D:\Workspaces)，我在 D 盘新建了一个叫 Workspaces的文件夹，大家可以自行选择位置。

这里 webpack 是以 webpack 为模板指生成项目， wj-vue 是我们的项目名称（White Jotter），大家也可以起别的名字。

2.2. 安装图解

序号	图解说明	选择
①	项目名叫什么(要和你的项目名保持一致)，不能大写	默认即可
②	添加项目描述	vue2.5 去哪儿app
③	添加作者	`gb-heima <754263923@qq.com>`
④	选择编译形式	standalone
⑤	是否安装 vue-router工具，路由工具	y
⑥	是否使用ESLint对你的代码规范进行检查	y
⑦	选择代码检测的规范	Standard
⑧	是否进行单元测试	y
⑨	test runner 测试	y
⑩	是否进行e2e测试	y
⑪	包管理使用npm还是用yarn	默认npm即可

项目初始化完成！！！

2.3. 项目结构总览

可以看到 Workspace 目录下生成了项目文件夹 wj-vue，里面的结构如图

2.4. 运行项目

接下来，进入到我们的项目文件夹里(cd D:\workspace\wj-vue)，执行npm run dev

注：项目构建成功，这一步如果报错，可能是未能加载项目所需的依赖包，即 node_modules 里的内容，需要在该文件夹执行 npm install ，再执行 npm run dev

2.5. 浏览器验证

访问 http://localhost:8080，查看网页 demo，大工告成！

Vue + Spring Boot 项目实战（二）：使用 CLI 搭建 Vue.js 项目相关推荐

Taro多端开发实现原理与项目实战(二)
Taro多端开发实现原理与项目实战(二) 多端电商平台项目概述及开发准备学习了前面的基础知识和进阶后是否跃跃欲试?我们准备了一个电商平台的项目来和大家一起实践使用 Taro 开发电商平台. 项目概述 ...
Vue + Spring Boot 项目实战（二十一）：缓存的应用
重要链接: 「系列文章目录」「项目源码(GitHub)」本篇目录前言一.缓存:工程思想的产物二.Web 中的缓存 1.缓存的工作模式 2.缓存的常见问题三.缓存应用实战 1.Redis 与 ...
Vue + Spring Boot 项目实战（四）：数据库的引入
这一篇的主要内容是引入数据库并实现通过数据库验证用户名与密码. 本篇目录一.引入数据库 1.安装数据库 2.使用 Navicat 创建数据库与表二.使用数据库验证登录 1.项目相关配置 2.登录控 ...
Vue + Spring Boot 项目实战（十五）：动态加载后台菜单
重要链接: 「系列文章目录」「项目源码(GitHub)」本篇目录前言一.后端实现 1.表设计 2.pojo 3.菜单查询接口(树结构查询) 二.前端实现 1.后台页面设计 2.数据处理 3.添 ...
Vue + Spring Boot 项目实战（三）：前后端结合测试（登录页面开发）
前面我们已经完成了前端项目 DEMO 的构建,这一篇文章主要目的如下: 一.打通前后端之间的联系,为接下来的开发打下基础二.登录页面的开发(无数据库情况下) 本篇目录前言:关于开发环境一.后端项 ...
Vue + Spring Boot 项目实战（九）：核心功能的前端实现
本篇目录前言一.代码部分 1.EditForm.vue(新增) 2.SearchBar.vue(新增) 3.Books.vue(修改) 4.LibraryIndex.vue(修改) 5.SideM ...
Vue + Spring Boot 项目实战（七）：导航栏与图书页面设计
本篇目录前言一.导航栏的实现 1.路由配置 2.使用 NavMenu 组件二.图书管理页面 1.LibraryIndex.vue 2.SideMenu.vue 3.Books.vue 前言之前 ...
Vue + Spring Boot 项目实战（六）：前端路由与登录拦截器
本篇目录前言一.前端路由二.使用 History 模式三.后端登录拦截器 1.LoginController 2.LoginInterceptor 3.WebConfigurer 4.效果检验 ...
Vue + Spring Boot 项目实战（十七）：后台角色、权限与菜单分配
重要链接: 「系列文章目录」「项目源码(GitHub)」本篇目录前言一.角色.权限分配 1.用户信息表与行数据获取 2.角色分配 3.权限分配二.菜单分配下一步前言有感于公司旁边的兰州 ...
《Vue+Spring Boot前后端分离开发实战》专著累计发行上万册
杰哥的学术专著<Vue+Spring Boot前后端分离开发实战>由清华大学出版社于2021年3月首次出版发行,虽受疫情影响但热度不减,受到业界读者的热捧,截至今日 ...

Vue + Spring Boot 项目实战（二）：使用 CLI 搭建 Vue.js 项目