一、项目创建
1、安装vue-cli
cmd：npm install -g @vue/cli@4.5.19
验证是否安装成功：vue -v 出现版本号说明安装成功
2、创建项目
vue create 项目名称
根据自己的需求选择特性，如下所示：
手动选择：
选择自己需要的特性：例如：
选择vue版本
选择路由模式 （输入y和n都可以，y代表history模式没有#号， n代表hash模式有#号）：
选择css预处理器，根据需求自行选择：
格式化和代码检测的配置，默认的就行：
代码格式检测时机，默认就行：
你希望配置放在哪：
是否保存特性，根据你的需求来：
输入： cd 项目名称
npm run serve
二、组件的配置（以vant组件为例）：
1、安装组件：npm i vant@latest-v2 -S（手机端）
Vant 2 - Mobile UI Components built on Vue
npm i --save ant-design-vue@1（PC端）
Ant Design Vue
2、引入组件：以全部引入（简单粗暴）为例：在main.js中导入
import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false;
Vue.use(Antd);
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>',
});3、主题色的设置：
vue cli是版本4，所以用vue cli3定制；
项目根目录下新建文件vue.config.js：
// vue.config.js for less-loader@6.0.0
module.exports = {
css: {
loaderOptions: {
less: {
lessOptions: {
// If you are using less-loader@5 please spread the lessOptions to options directly
modifyVars: {
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
},
javascriptEnabled: true,
},
},
},
},
};将main.js中的import 'ant-design-vue/dist/antd.css'改为import 'ant-design-vue/dist/antd.less'；
将package.json中的"less-loader": "^5.0.0",改为"less-loader": "6.0.0",
然后在集成终端输入npm i less-loader@6.0.0 -D或者直接将less-loader改为6.0然后npm i
三、配置代理：
项目根目录下新建文件vue.config.js：
// vue.config.js for less-loader@6.0.0
module.exports = {
//配置代理
devServer:{//所有的配置项
proxy:{//配置
//不设置 重写 http://wkt.myhope365.com/weChat
//设置重写 http://wkt.myhope365.com
'/course-api':{//代理名称,这里最好有一个
target:'https://course.myhope365.com/api', // 后台接口域名
changeOrigin:true,//是否跨域
pathRewrite:{
'^/course-api':''//路径重写
}
},
// 'api':{
// target:'https://course.myhope365.com', // 后台接口域名
// changeOrigin:true,//是否跨域
// // pathRewrite:{
// // '^/course-api':''//路径重写
// // }
// },
}
}
};四、封装axios:
安装axios：axios:npm i axios -S
引入axios（在main.js文件中）： import axios from "axios";
Vue.prototype.$axios = axios（挂载）
封装axios：（src->api->axios.js）
// 对http请求进行封装
import axios from 'axios'
// 使用自定义的配置文件发送请求
const instance = axios.create({
baseURL: '',
timeout: 5000,
headers: {
}
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
instance// 对响应数据做点什么
if(response.status === 200){
return response.data;
}else{
console.error("请求错误")
console.error(response)
}
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default instance
文章来源地址https://www.toymoban.com/news/detail-737863.html文章来源：https://www.toymoban.com/news/detail-737863.html
到了这里，关于使用vue-cli创建vue2项目以及项目配置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
