vue培训

1. 环境

1. node
2. (可省略)

• 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

4. vscode

   插件

   • vetur
   • eslint
   • EditorConfig
   • chinese

5. git

6. Windows系统中，Git的LF/CRLF问题
   git config --global core.autocrlf false

2. 代码

1. 拉取代码
2. npm install 安装依赖
3. npm run dev 本地运行
4. npm run build 打包

3. 项目结构

4. 例子

1. views下新建about.vue
   输入vue 并回车,会自动生成vue项目模板

2. 配置路由,router/index.js,

router

3. 请求
   响应要求 返回格式为
   {code:0,data:----,msg:"--------"}
   正常返回code为0
   server/index.js
   
   vue文件调用
   axios文档
   axios文档

4. 样式库
   Element
   使用时将标签内的el替换成aui,<el-button>改成<aui-button>
   aui-web是Element以前的版本,所以不全,也不完全一样

5. vue
   组件调用
   
   ref
@click
:data

提交自己的代码之前,一定要先拉取代码,没有问题,在提交.

axios

get

1. /user?ID=12345

.get('/user', {
    params: {
      ID: 12345
    }
  })
.get('/user?ID=12345')

post

1. json

.post('/user', {
   firstName: 'Fred',
   lastName: 'Flintstone'
 })

2. /create?name=&age=*

.post(`/create`, null, { params: {
  name:name,
  age:age
}})

3. application/x-www-form-urlencoded

const qs = require('qs');

.post("/foo", qs.stringify({ id }), {
 headers: { "content-type": "application/x-www-form-urlencoded" }
})

4. 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)