1. 环境
- node
- (可省略)
-
NPM设置淘宝镜像
1.查询当前配置的镜像
npm get registry
https://registry.npmjs.org/
设置成淘宝镜像
npm config set registry http://registry.npm.taobao.org/
2.换成原来的
npm config set registry https://registry.npmjs.org/
-
安装cnpm并设置淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v
-
vscode
插件
- vetur
- eslint
- EditorConfig
- chinese
-
git
-
Windows系统中,Git的LF/CRLF问题
git config --global core.autocrlf false
2. 代码
- 拉取代码
npm install
安装依赖npm run dev
本地运行npm run build
打包
3. 项目结构
4. 例子
-
views
下新建about.vue
输入vue
并回车,会自动生成vue项目模板 -
配置路由,
router/index.js
,
-
请求
响应要求 返回格式为
{code:0,data:----,msg:"--------"}
正常返回code为0
server/index.js
vue文件调用
axios文档
axios文档 -
样式库
Element
使用时将标签内的el
替换成aui
,<el-button>
改成<aui-button>
aui-web是Element以前的版本,所以不全,也不完全一样 -
vue
组件调用
ref
@click
:data
提交自己的代码之前,一定要先拉取代码,没有问题,在提交.
axios
get
- /user?ID=12345
.get('/user', {
params: {
ID: 12345
}
})
.get('/user?ID=12345')
post
- json
.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
- /create?name=&age=*
.post(`/create`, null, { params: {
name:name,
age:age
}})
- application/x-www-form-urlencoded
const qs = require('qs');
.post("/foo", qs.stringify({ id }), {
headers: { "content-type": "application/x-www-form-urlencoded" }
})
- multipart/form-data
var fd = new FormData();
fd.append("id", form.id);
.post("/update", fd, {
headers: {
"Content-Type": "multipart/form-data"
}
})
命名
文件夹 文件 (除index)驼峰
弹窗组件 createDialog.vue(xxxxDialog)
普通组件 xxxxCom.vue
class名 (login-box)