前言

首先在教程之前先说几句。在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue。利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 Vue 的特性的。这点在接下来的内容中我们可以慢慢感受。
关于项目的构建其实类似的文章网上有很多,但我还是重新写了一下,一是为了确保项目能够运行成功,二是对几个细节作了解释,三是加入了使用 IDE 的构建方法。
在动手操作之前,我希望大家已经清楚什么是 “前后端分离” ,什么是 “单页面应用” 。
简单地说,前后端分离 的核心思想是前端页面通过 ajax 调用后端的 restuful api 进行数据交互,而 单页面应用(single page web application,SPA),就是只有一张页面,并在用户与应用程序交互时动态更新该页面的 Web 应用程序。
附上 Vue 的官方教程:
https://cn.vuejs.org/v2/guide/

使用cli搭建Vue.js项目

1.安装Vue

首先,我们需要安装一个node.js,因为接下来我们需要使用npm安装Vue cli,而npm就是集成在node.js中的。我们去官网下载node.js就好了,贴上官网地址:https://nodejs.org/en/ ,首页下载即可。
Spring boot+Vue前后端分离项目实战(一)
从图中可以看出有两个版本,左边为长期支持版本,右边为当前版本,不过我一般下载的都是当前版本。
下载完成后,傻瓜式安装点next就好了。然后win+R输入cmd点击确定再输入node -v

如图,出现了版本号就表明已经安装成功了。如果没安装成功的话,可以留言报错情况,我看到了会帮你解决。接下来再输入npm -v看下npm的版本号及有木有安装成功。

之后可以选择安装 cnpm,即 npm 的国内镜像。使用 cnmp 的好处是在日后下载内容时会比较快,但是下载的包可能不是最新的。
安装 cnpm 的命令为 :
npm install -g cnpm --registry=https://registry.npm.taobao.org

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

之后,使用 npm install -g vue-cli 安装脚手架。
接下来,我们就开始搭建我们的前端项目了。

构建前端项目

直接使用命令行构建项目。首先,进入到我们的工作文件夹中,我在 D 盘新建了一个叫code的文件夹,大家可以自行选择位置。

然后执行命令 vue init webpack yusigu_blog_web,这里 webpack 是以 webpack 为模板指生成项目,还可以替换为 pwa、simple 等参数,这里不再赘述。 yusigu_blog_web 是我们的项目名称,大家也可以起别的名字。
在程序执行的过程中会有一些提示,可以按照默认的设定一路回车下去,也可以按需修改,比如下图问我项目名称是不是 yusigu_blog_web,直接回车确认就行。

接下来一路按Y或者回车键就好了,然后在等待项目构建完成就行了。

等待一下项目构建,如果出现这样就表示项目成功的构建完成了。

回过头来,我们可以看到在code目录下生成了yusigu_blog_web文件夹,里面的结构如下图所示:

现在我们再进入到我们项目的文件夹中(D:\code\yusigu_blog_web),执行npm run dev

如上图出现了I Your application is running here: http://localhost:8080 证明已经成功的启动了。访问 http://localhost:8080 ,查看网页 demo,大工告成!


二十三年文の博客创始人