vue+webpack+amazeui项目小记

webpack
1.webpack在package里设置，可以执行npm run *;
dev:服务器的开启
start:服务器开启
build：项目打包
unit: 单元测试

 "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "test": "npm run unit",
    "lint": "eslint --ext .js,.vue src test/unit/specs",
    "generate-icons": "vsvg -s ./svg-icons -t ./src/compiled-icons"
  },复制代码

vue：

1.JS文件与CSS的引入一般使用：

import {} from *.js
@import '*.css'复制代码

2.在各个组件设置绑定数据与方法：
template里的逻辑判断
v-if : 如果里面的内容逻辑成立 div显示

<div v-if="data的数据==你想判断的数据"></div>复制代码

v-bind ：如何里面内容的boolean为true则添加
v-model: 进行数据的双向绑定，input发生变化 data里的对应数据也发生变化
v-on : 事件处理
    v-on:keyup.enter="fuc()"//绑定一个回车键的keyup事件
    v-on：click.stop="fuc()"//阻止click的默认事件
    (更多在官方文档)复制代码

<input class="max-width" v-bind:class="{'form-group--error': $v.goodsNameZH.$error}//若成立class会被添加" v-model="goodsNameZH"//与data里的此数据进行双向绑定 type="text" id="doc-ipt-pwd-3"
:placeholder="$t('message.Goods.productNameCH')"//添加一个placeholder   @input="$v.goodsNameZH.$touch()"//v-on:与@一致,绑定输入框输入事件
>复制代码

v-for 与v-if的使用
1.如果v-if为true，div显示
2.循环attachList对象 并用item取出各个循环出来的数据并开始渲染出多个img
3.img中也有判断，如果item里有serverUrl，则显示，并且绑定一个src属性将item里的serverUrl显示到上面

    <div v-if="attachList.length>0" v-for="item in attachList">
        <img v-if="item.serverUrl" :src="item.serverUrl+'/'+item.serverName" width="100px" height="100px">
        <img v-else :src="'http://bdtimage.saohuijia.com/'+item.serverName" width="100px" height="100px">
    </div>复制代码

template绑定data与methods
（数据绑定没有this）
v-html : 为innnerHtml;

  <button type="button"
    class="am-btn am-btn-primary btn-loading-example cancel-save-button"
    @click="submit"//绑定的methods里的函数
    data-am-loading="{spinner: 'circle-o-notch', loadingText: '加载中'}">
    <span v-html="$t('message.submit')"></span>//在botton里显示的内容复制代码

export default{
    name:'命名的组件名'，
    data:function(){
        return{
            绑定的变量数据名：‘’，
            ...
        }
    }
    created:function(){
        //在此处进行数据的获取与渲染页面
        this.绑定的变量数据名  =  '具体数据' || this.$route.params.变量数据名（由router-link传来的数据）
    }
    methods:{
        //方法的定义，箭头函数会改变This指向，如果在函数里this没有被定义的话，需要变为以下函数
        fuc : function(){},

}复制代码

vue-router
1.新建一个router文件夹里的 *.js

import Vue from 'vue'                       //引入vue
import Router from 'vue-router'             //引入vue-router
import Login from '@/components/Login'      //引入需要加载的组件
import AdminPage from '@/components/AdminPage'

Vue.use(Router)                             //使用 Router

export default new Router({                 //NEW一个新的路由
    routes : [                             //路线配置
    {
        path:'/',                           //路径为根路径
        name:'index',                      //路由名称
        component :Login,                  //渲染的组件
    }，
    {
        path:'/admin'
        name:'admin',
        component : adminPage,
        children:[                      //admin路径下的子路由
         { path: 'addGoods/:shopId',  //此处路径可传入数据以防页面刷新数据消失
           name: 'addgoods',
          component: AddGoods
        },
        ]
    }
    ]
})复制代码

router-link
：to 绑定一个 router-link要 进入的路由名字
= {} 可以传入一系列数据到下一个路由，然后在路由文件path里进行保存，

<router-link :to="{name: 'dish', params:{shopId: shopId, shopName: shopName, status: status}}">
    <button type="button" class="am-btn am-btn-default cancel-save-button"><span v-html="$t('message.cancel')"></span></button>
</router-link>复制代码

amazeui

<template>
  <router-view></router-view>   // 此处是router-view 的渲染处
</template>

<script>
import amazeui from "amazeui"  //在此处引入amazeui
export default {               
  name: 'App'
}
</script>
                            // 在此处引入需要全局加载的css
<style>
  @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
  @import "../node_modules/amazeui/dist/css/amazeui.css";
@import "../static/css/common.css";
@import "../node_modules/webuploader/dist/webuploader.css";
</style>复制代码

转载于:https://juejin.im/post/59e19527f265da43215311c8