一 ：技术选型
npm
node 如何安装node可以访问官网
webpack
elementUi
vue-cli
axios请求
vuex+vue-router+vuex +mock.js
二：项目搭建
vue init webpack myvueElementProjectName
可以一路回车，eslint语法检测可以选择关闭，对代码规范有要求可以开启，也能提高自己的编码能力， 安装依赖的方式可以选择yarn或者npm，本文选择npm。也推荐yarn，优点是能缓存依赖和依赖版本
生成项目之后
npm install安装依赖。假如你有淘宝镜像也就是cnpm（如何安装自行百度蟹蟹）。就用cnpm install
安装依赖完成后 npm run dev 或者npm start 都能启动项目
启动后就开始修改项目配置了
assets主要放置页面静态资源
static主要放置第三方库资源，比如我们的icon库，什么的。
修改app.vue
根据路由里面时候保持活跃状态动态给到容器，
基本准备 我的css预编译处理器用的是stylus。
安装 stylus ,我使用的时候老是说什么没安装报错，然后我就把css-loader vue-style-loader 都安装了一遍，记得用 --save双杆。
为了确保自动格式化时stylus的风格不发生变化，只需要对vscode进行设置，在vscode的插件选项中搜索 "stylus Supremacy” 安装，格式化stylus文件的格式。声明style样式为lang=stylus
然后修改settings.json文件
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
引入stylus文件
.安装elementUI
cnpm install element-ui -S 安装
然后在main.js里加入 这里事全局引入。需要按需引入的话参考官网。个人认为差别不大
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
封装axios
import
axios
from
'axios'
import
qs
from
'qs'
import {
Message
}
from
'element-ui';
// 格式是这样的： username = renping & password = 123456
var
service =
axios.
create({
baseURL:
'https://api.apiopen.top/',
timeout:
10000,
// headers: {
// 'content-type': 'application/json',
// 'token': '14a1347f412b319b0fef270489f'
// }
// 下一步优化。创建请求拦截器 。创建开发环境下的
})
export
default {
/* get请求 */
get(
url,
params) {
return
new
Promise((
cback,
reject)
=> {
service({
method:
'get',
url,
params:
qs.
stringify(
params)
}).
then(
res
=> {
//axios请求返回的是个promise对象
var
resCode =
res.
status.
toString();
if (
resCode.
charAt(
0) ==
'2') {
//判断状态值是不是2开头的正确状态值
cback(
res)
//cback在promise对象内部
Message({
showClose:
true,
message:
'这是一条成功消息',
type:
'success'
});
}
else {
console.
log(
res,
'成功内部异常1')
}
}).
catch(
err
=> {
if (!
err.
response) {
console.
log(
err)
Message({
showClose:
true,
message:
'这是一条错误消息',
type:
'error'
});
}
else {
reject(
err.
response)
console.
log(
err.
response,
'错误异常二')
}
})
})
},
/* post请求 */
post(
url,
params) {
return
new
Promise((
cback,
reject)
=> {
service({
method:
'post',
url,
params:
qs.
stringify(
params)
}).
then(
res
=> {
//axios请求返回的是个promise对象
var
resCode =
res.
status.
toString();
if (
resCode.
charAt(
0) ==
'2') {
//判断状态值是不是2开头的正确状态值
cback(
res)
//cback在promise对象内部
}
else {
console.
log(
res,
'成功内部异常1')
}
}).
catch(
err
=> {
if (!
err.
response) {
console.
log(
'请求错误')
}
else {
reject(
err.
response)
console.
log(
err.
response,
'错误异常二')
}
})
})
}
}
