一、使用脚手架
1.1 脚手架的卸载安装以及升级
- 卸载旧版本脚手架
npm uninstall vue-cli -g
- 安装最新版本脚手架Vue CLI 4.x (需要 Node.js v8.9 或更高版本)
npm install -g @vue/cli
- 如需升级全局的 Vue CLI 包,请运行:
npm update -g @vue/cli
- 验证是否安装成功
vue --version
1.2 创建项目
- 创建一个 Vue前端项目hello-world
vue create hello-world
- 打开项目
cd hello-world
-运行项目
npm run serve
1.3 使用图形化界面
- 在cmd中输入下面的命令即可:
vue ui
然后会自动进入网页,和命令行的功能差不多
1.4 拉取 2.x 模板 (旧版本)
- Vue CLI >= 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project
1.5 开发Vue脚手架
1.5.1 Vue脚手架使用axios
如果在创建项目以后,需要加入其它插件:
-
在脚手架中安装axios:
npm install axios --save-dev
-
在main.js中引入
import axios from 'axios'
-
接着将Vue内部的$http改写为axios
Vue.prototype.$http=axios
-
使用axios
//get请求 this.$http.get("url").then((res)=>{}) //post请求 this.$http.post("url",参数).then((res)=>{})
-
全局配置baseURL(后面如果接口baseURL更改了,可直接修改这里)
Vue.prototype.$http.defaults.baseURL = ''
- 关于:- -save-dev
1.6 项目打包和部署
-
在项目根目录中执行如下命令
npm run build
-
打包以后项目中会多出一个dist文件,dist目录就是vue脚手架项目生产目录或者说是直接部署目录。
-
然后将这个dist目录拷贝到我们的springboot项目中的static路径,再将index.html文件的引入路径进行修改,前后端项目就完整结合起来了