VueCLI脚手架使用以及项目打包部署笔记

一、使用脚手架

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

如果在创建项目以后，需要加入其它插件：

1. 在脚手架中安装axios：

   npm install axios --save-dev
   

2. 在main.js中引入

   import axios from 'axios'
   

3. 接着将Vue内部的$http改写为axios

   Vue.prototype.$http=axios
   

4. 使用axios

   //get请求
   this.$http.get("url").then((res)=>{})	
   //post请求
   this.$http.post("url",参数).then((res)=>{})	
   

5. 全局配置baseURL（后面如果接口baseURL更改了，可直接修改这里）

    Vue.prototype.$http.defaults.baseURL = ''
   

• 关于：- -save-dev

1.6 项目打包和部署

1. 在项目根目录中执行如下命令

   	npm run build
   

2. 打包以后项目中会多出一个dist文件，dist目录就是vue脚手架项目生产目录或者说是直接部署目录。
   

3. 然后将这个dist目录拷贝到我们的springboot项目中的static路径，再将index.html文件的引入路径进行修改,前后端项目就完整结合起来了

官网链接：https://cli.vuejs.org/zh/guide/