同学们好，今天我们简单说一下vue.js 3.0的框架搭建方法。
或许有的同学还不知道vue3.0与之前的版本有了哪些改动，可以查查相关资料。主要改动是优化了节点，减少了无谓的遍历，优化速度提升了6倍！
那么vue-cli3.0框架与之前又有了一些变化，我们简单说几个：
1、名字改了，以前叫vue-cli,现在叫@vue/cli。
2、build和config文件包被移除了。那么build打包文件，以后会在我们打包的时候自动的生成dist了，一些配置也被优化到了项目当中。config文件也是同样如此；
3、新增文件public，我们每次看到的根文件index.js它被移入到了public当中，里边除了这个入口文件外，还把网页ico图标存放到这里；
4、src文件件下自动帮我们新增了view文件夹，以后就可以直接在这里放我们的页面文件了，也统一了一下大江南北各种奇葩的命名。
5、除了这些，一些插件也有了一些变化，具体我们稍后会代入讲解。
6、还有一个比较智能化的增加：vue ui。稍后我们再说。
7、运行后增加了Network本地运行网址，好处是开发移动端，我们可以边开发，边在手机上看到效果，兼容问题一目了然。
-----------------
----- 铺垫了这么多，接下来我们开始框架的搭建教程：-----
-----------------
1、重新安装3.0
刚才说过了，cli3的脚手架名称改成了：@vue/cli，所以我们就不能覆盖之前的版本了，我们想要用3.0开发新项目，就需要先把以前的卸载掉：
卸载方法：npm uninstall vue-cli -g，
️️苹果mac本卸载需要加上管理员权限，也就是在前边加上sudo，否则会报错。sudo npm uninstall vue-cli -g，回车后需要输入电脑开机密码（输入时是看不到的，输入完直接回车键就ok）。
下载vue-cli3:
npm install -g @vue/cli // mac本前边还是一样，要加sudo ： sudo npm install -g @vue/cli下载完可以输入vue --version看一下是不是3**的版本。
vue --version
// 3.9.32、创建项目
用命令行vue create 项目名称可以创建一个项目框架，项目名称不要使用驼峰命名。比如我们创建一个名称为villin的项目：
vue create villin3、输入项目配置
创建项目后和以前一样，会询问一些配置问题。
️注意：个别电脑第一次创建时，会询问是否加速开发工作流，输入y回车就好。以后就不会再询问了
首先会让你选择一个预设配置preset，如果有配置过会记载上，可以选择以前配置过的，如图片中的name是我之前配置的。
如果没有会出现两个配置让你选择，一个基本的 Babel + ESLint ，一个是更多配置，我们第一次可以手动选择更多配置：键盘上下箭头选择，回车确认
接着选择自己想要的配置：我选择了Babel转码，Router、Vuex、CSS Pre-processors、Linter / Formatter格式这四个；上下箭头移动，空格选择，回车确认
接着让你选择模式，是否是history模式，因为history模式还需要后台配合，所以本次选择否。
接着选择sass模式，我们选择node-sass，它可以进行时时编译。
接着选择ESLint代码规范，我选择了第三个，可以进行纠正代码。
接着选择什么时候检查代码，我选择第一个，保存就检查。第二个是commit时检查，不建议。
接下来会询问配置的存放位置，我们选择第一个单独存放。第二个是放在package.json中。
接着询问是否需要保存这些配置？还得即刚刚第一次询问的预设配置？第一次那个name就是之前保存的，这次你可以保存
为这个保存的配置起个名字：
ok，回车开始运行，稍等片刻，我们这个框架就配置完成，打开就是这个样纸。
我们可以运行起来
npm run serve运行后，就是这个样子的，我们可以将Local后的地址放在浏览器打开就能运行了。
注意看，它比以前多了一个地址Network。如果进行移动端开发，在同一个局域网下，将这个地址放在手机浏览器中打开，会直接看到开发的效果，也能直接反映出兼容性问题，这个对自测来说，非常有用。
关于以前版本怎么自测，可以参考我之前的文章：https://yq.aliyun.com/articles/709164?spm=a2c4e.11155435.0.0.2eff3312pboMcM
-----------------
----- 接下来我们搭建所需要的功能：-----
-----------------
引入axios
axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
首先我们需要在这个项目当中，下载axios
npm install axios在src目录下创建一个utils文件夹，文件夹中创建一个放axios 的 js文件，这个名字随便起，要么http.js 或者 request.js 都行。我以http.js为例，我们来写一个axios拦截器配置文件：
如果理解不了axios，建议先去学一学ajax，参考文章： https://yq.aliyun.com/articles/710192?spm=a2c4e.11155435.0.0.2eff3312pboMcM
// http.js 文件
import axios from 'axios'
// 自定义创建 axios 实例
const http = axios.create({
baseURL: process.env.baseURL, // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
timeout: 10000 // 请求超时时间
})
// request 添加请求拦截器
http.interceptors.request.use(
config => {
// 在发送请求之前做些什么可以写在这个位置
return config
},
error => {
// 对请求错误做些什么在这个位置写
console.log(error)
Promise.reject(error)
}
)
// response 添加响应拦截器
http.interceptors.response.use(
response => {
// 这里是收到了response请求，数据一般存放在下边的data中，所以我们创建一个res，获取到这个data
const res = response.data
return res
},
error => {
// 这里放置response返回错误时的逻辑，错误码会放在```status```当中，我们可以进行一些错误码的判断：
if(error.response){
switch(error.response.status){
case 401:
// 401时的操作
break
case 502:
// 402时的操作
break
case 500:
// 500时的操作
break
// ️注意，这些错误码都是随便举的例子，具体要和项目当时返回的数值而定，去和后端确定错误码。
}
}
return Promise.reject(error)
}
)
export default http
以上就是axios的拦截器配置。拦截器用于联调接口时，返回各种错误问题的拦截，我们可以相应的给到用户反馈，比如登陆密码错误，再比如网络连接失败等，我们可以根据错误码作出相应的提示。
配置完，我们可以创建一个单独的 js 文件，用于统一存放后端接口的。刚才在utils 中 创建了http.js 文件，我们同样，再次在这个文件夹中创建一个 api.js 文件用于存放接口方法，看下目录结构。
接口就需要引入我们刚刚配置的拦截器，首先我们在 api 文件中需要引入刚才的文件。
// api.js文件
import axios from './http'
// 例如 后端给两个接口，一个叫 ```/IndexPage``` 的接口，发送的 ```get``` 请求，
// 一个叫 ```/IndexPage/submitTicket``` 的接口，发送的 ```post``` 请求，
// 我们可以定两个变量名叫“page” 和 “ticket”
// page接口 params接收参数，返回给接口
page : params => axios.get('/IndexPage', { params }),
// ticket接口
ticket : params => axios.post('/IndexPage/submitTicket', params ),
这样就联调了接口。那我们怎么在页面中得到接口返回的信息呢？我们在需要的界面中按需引入 api.js ，然后获取到这个信息，按照promise的方法就可以获取到信息：
<template>
<div>
</div>
</template>
<script>
import api from '@/utils/api' // 引入api文件
export default {
data(){
return{
}
},
methods:{
// 在methods中调用接口
homeApi(){
api.page().then(res => {
// 这里就是page接口，返回的信息，我们可以判断状态，成功后返回接口信息
if(res.status === 200){
// 当状态为200时，这里返回接口信息
console.log(res)
}else{
// 如有有错误需求，可以在这里写
}
})
},
// 如果需要传参，可以定义一个变量params，把参数放在这里，然后放在需要的接口中就好。
ticket(){
params{
参数key：参数value
}
api.ticket(params).then(res => {
// 这里就是page接口，返回的信息，我们可以判断状态，成功后返回接口信息
if(res.status === 200){
// 当状态为200时，这里返回接口信息
console.log(res)
}else{
// 如有有错误需求，可以在这里写
}
})
},
}
}
</script>
这样一个axios就布置完成了
-----------------
----- 接下来我们做webpack相关的配置和代理：-----
-----------------
这些配置需要我们创建一个新的文件，这个文件名是固定的vue.config.js，要求必须和 package.json 文件同级，也就是最外层。
我们创建一个 vue.config.js 文件。这个文件它会被 @vue/cli-service 自动加载，自动识别出内置的配置。
参考官网https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
在这个文件里我们就可以做我们想要做的配置了，举几个常见的例子。
// vue.config.js
const path = require('path')
// 封装打包路径连方法 根据项目可自己封装
function join (dir) {
return path.join(__dirname, dir)
}
// 封装路径解析方法 根据项目可自己封装
function resolve (src) {
return path.resolve(__dirname, src)
}
module.exports = {
// 配置test pre等环境；
publicPath: process.env.NODE_ENV === 'production' ? '/自己项目的路径path/' : '/' //baseUrl从 Vue CLI 3.3 起已弃用，请使用publicPath。
// loader配置,如css loader
css: {
loaderOptions: {
css: {
// 这里的选项会传递给 css-loader
},
postcss: {
// 这里的选项会传递给 postcss-loader
}
}
}
// 跨域proxy配置
devServer: {
'/v4': {
target: 'https://v4/home/', // 对应自己的接口
changeOrigin: true,
ws: true,
pathRewrite: {
'^/v4': '/v4'
}
},
}
}
其他配置信息，官网最全。
参考官网https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
项目架构很多中搭配方法，知识也应用到webpack和node，大家可以多多学习。
开始的时候还提到过 vue ui， 十一个图形化工具，可以在页面中创建项目，并且可以搜索下载各种插件，非常方便。
在命令行中运行vue ui即可。
然后弹出页面后，就可以在其中创建项目，目前在公司中实用性还不算太普及，同学们可以自行操作一边，了解一下未来前端发展的趋势也是好的。
这篇文章写的很累，就先到这里，发现问题可以及时沟通，最后希望对大家有所帮助。
博主联系方式：
e-mail：avillin@163.com
weChat:VillinWeChat
