从0到1创建一个vue项目

一,下载安装node.js

链接：link
cmd命令： node -V 《查看版本》

---

二,安装淘宝镜像 《npm》

cmd命令：npm install -g cnpm --registry=https://registry.npmmirror.com
cmd命令：npm config get registry 《查看淘宝镜像》

---

三，安装全局vue-cli脚手架

cmd命令：npm i -g @vue/cli --force

---

四，创建vue文件

cmd命令：vue create “加文件名称” 比如（vue create myvue）

---

五，选择

1.Default ([Vue 3] babel, eslint)

默认使用vue3

2.Default ([Vue 2] babel, eslint)

默认使用vue2

3.Manually select features

手动选择功能
手动选择介绍：
图一，
选中：
Router
Vuex 回车

（有时需要加入CSS Pre-processors）

---

图二，

选择使用：
vue2还是vue3 回车

---

图三，

？ 检查你的项目所需的功能:Babel，路由器，Vuex, Linter

？ 选择一个Vue.js版本，你想用它来启动项目

？ 路由器使用历史模式?(需要适当的服务器设置以便在生产中实现索引回退)(Y/n)

选择 no 回车

---

图四，

不要动 直接回车

---

图五，

不要动 直接回车

---

图六，

不要动 直接回车

---

图七，

选择 no 回车

---

图八，

第一步：cd mykong
第二步：运行 npm run serve

---

六，安装axios

cmd命令：npm i axios -S

七，assets中放置css与js文件夹分别存放

1.reset.css
2.flexible.min.js

八，新建utils文件夹，在utils文件夹中建request.js用来拦截，响应

import axios from 'axios'

import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
var toast = null;


const request = axios.create({
	baseURL: '',//根据接口文档填写
	timeout: 5000,
})
request.interceptors.request.use(function (config) {
	config.headers.Authorization = 'Bearer ' + localStorage.getItem("token");

	toast = Toast.loading({
		message: '加载中...',
		forbidClick: true,
	}); 



	return config;
})


request.interceptors.response.use(
	function (res) {
		toast.clear();
		Promise.resolve(res);
		return res;
	},
	function (err) {
		toast.clear();
		Promise.resolve(err);
		return err;
	}
)



export default request;

介绍：此拦截需安装vant和axios

九，创建api.js用来管理后台接口

1.引入request.js

2.接口代码

import request from "@/res/request";
// 登录
function postdenglu(data){
    return request.post('/api/login',data)
}
export {
    postdenglu
}