目录
注意事项
components文件夹:主要写会重复用到的模块
views:写页面
文件命名格式:以大写开头,且至少两个单词,eg:ClassPage.vue
安装配置时:要先进入到正确的项目文件夹下
1、创建vue脚手架
不要出现中文名
vue create lean-router
2、项目启动
不一定是如下,具体项目配置有具体启动命令
cd lean-router
npm run serve
3、安装路由VueRouter
(1)可以在构建VueCLI脚手架时自动安装配置
(2)也可自行安装,命令如下
npm install vue-router@3
npm run serve
4、安装axios【需要自行安装】
(1)安装
npm install axios
(2)封装
①src文件夹下新建=》request文件夹=》request.js
import axios from 'axios';
创建实例
const instance = axios.create({
baseURL:"",
timeout:1000,//超时则中断请求
})
export default instance
②src文件夹=》新建api文件夹=》about.js、home.js、index.js
import instance from "@/request/request.js"
export function Rainbow(params){
return instance({
url:'/caihongpi/index',
method:"GET",
params:params,//params
})
}
export function Flatterer(data){
return instance({
url:'/tiangou/index',
method:"POST",
data,
headers:{
'content-type':'application/x-www-form-urlencoded'
}
})
}
5、安装vuex
(1)安装
npm install vuex@3
(2)配置
进入main.js文件,进行vuex的引入和使用配置
import vuex from "vuex";
Vue.use(Vuex);
6、安装ElementUI【自行安装】
(1)安装
npm i element-ui -S
(2)配置
进入main.js文件,进行ElementUI组件库的引入
import ElementUI from 'element-ui'; //引入
import 'element-ui/lib/theme-chalk/index.css'; //引入
Vue.use(ElementUI); //使用
7、打包【提交项目】
npm run build