【SpringBoot+Vue项目实战开发】2020实时更新。。。。。。

【SpringBoot+Vue项目实战开发】2020实时更新。。。。。。

SpringBoot+Vue项目实战开发

作者：令狐荣豪(编程小哥令狐)

文章目录

​​SpringBoot+Vue项目实战开发​​

​​作者：令狐荣豪(编程小哥令狐)​​

​​一.使用 CLI 搭建 Vue.js 项目​​

​​1.1构建前端项目​​​​1.2Vue 项目结构分析​​

​​1.2.1index.html​​​​1.2.2App.vue​​

一.使用 CLI 搭建 Vue.js 项目

因为需要使用 npm 安装 Vue CLI，而 npm 是集成在 Node.js 中的，所以第一步我们需要安装 Node.js，访问官网 cmd 中输入 ​​node -v​​，检查是否安装成功。

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

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

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

安装 cnpm 的命令为 ：

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

之后，使用 npm install -g vue-cli 安装脚手架。（本文写作的时候 cli 仍在 2.x 时代，3.x 的构建方法与此类似，评论区有读者总结了注意事项，这里不再赘述）

1.1构建前端项目

运行完成后，输入 ​​npm run dev​​ 即可。

浏览器输入访问localhost://8080展示下图表示成功：

1.2Vue 项目结构分析

使用 CLI 构建出来的 Vue 项目结构是这个样子的

里面我们需要关注的内容如下图，重点需要关注的我用小红旗标了出来

其中我们最常修改的部分就是 components 文件夹了，几乎所有需要手动编写的代码都在其中。

接下来我们分析几个文件，目的是理解各个部分是怎么联系到一起的。

1.2.1index.html

首页文件的初始代码如下：

就是一个普普通通的 html 文件，让它不平凡的是

，下面有一行注释，构建的文件将会被自动注入，也就是说我们编写的其它的内容都将在这个 div 中展示。

还有不普通的一点是，整个项目只有这一个 html 文件，所以这是一个 单页面应用，当我们打开这个应用，表面上可以有很多页面，实际上它们都只不过在一个 div 中。

1.2.2App.vue

上面图上我把这个文件称为“根组件”，因为其它的组件又都包含在这个组件中。

.vue 文件是一种自定义文件类型，在结构上类似 html，一个 .vue 文件即是一个 vue 组件。先看它的初始代码

大家可能注意到了，这里也有一句

，但跟 index.html 里的那个是没有关系的。这个 id=app 只是跟下面的 css 对应。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。