整合springboot+vue.js--安装vue.js

业余时间想整理一个基于springboot2.x+mybatis+redis(二级缓存)+vue.js的小系统,随着工作经验的增加慢慢去完善它
废话不多说,安排一个node.js,回归最老版的命令行编码!

vue.js是什么?为什么要使用它?
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合,是近期最热门的前端框架之一,使用频率高,多接触和使用一些框架有助于自己发展。
安装vue.js的途径

1. 直接下载vue.js
进入vue.js官网去下载,在页面直接用< script >标签引用

2. 使用CDN方法
跟1方法类似 用< script >标签去引用路径
地址如下:

3.Npm(安装node.js)
安装步骤:
①:安装node.js
②:安装Npm
③:依赖cnpm(国内Npm的镜像,速度快)
④:vue-cli(安装脚手架构建工具)

1):进入node.js的官网去下载稳定版本的node.js(特定版本可在其他版本找)
在这里插入图片描述
安装过程及其简单,一直下一步就行了,安装好后。
打开命令行(windows环境下组合件win+R),输入node -v 查看node.js的版本,出现版本号则证明安装成功,如图所示:
在这里插入图片描述
2)安装npm:由于现在node.js安装文件再带npm安装,所以无需重新安装,只需要打开命令行输入npm -v,出现版本号即成功
在这里插入图片描述
3)安装cnpm:在命令行中输入 npm install -g cnpm --registry=https://registry.npm.taobao.org ,稍微等待一会,显示安装成功
4)安装vue-cli :在命令行中运行命令 cnpm install -g vue-cli ,然后等待安装完成。
初始化项目:打开命令行 输入cd vue项目安放路径(cd /d d:\Vue)
在这里插入图片描述
然后继续输入命令vue init webpack vue 。这个webpack是一个基底,整个项目依托于webpack,vue则是项目的文件夹名称,命令执行完,当前路径下回生成整个项目的文件夹。
打开路径,介绍一下目录及其作用:

build:最终发布的代码的存放位置。
config:配置路径、端口号等一些信息,我们刚开始学习的时候选择默认配置。
node_modules:npm 加载的项目依赖模块。
src:这里是我们开发的主要目录,基本上要做的事情都在这个目录里面,里面包含了几个目录及文件:
assets:放置一些图片,如logo等
components:目录里放的是一个组件文件,可以不用。
App.vue:项目入口文件,我们也可以将组件写这里,而不使用components目录。
main.js :项目的核心文件
static:静态资源目录,如图片、字体等。
test:初始测试目录,可删除
XXXX文件:配置文件。
index.html:首页入口文件,可以添加一些meta信息或者同统计代码啥的。
package.json:项目配置文件。

最后依赖一下cnpm:命令行执行 cnpm install

这样项目就搭建好了。

在命令行输入 npm run dev 会启动我们项目,同时也是热部署(修改代码后无需刷新就可以看到效果)。

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页