Vue 从零开始，项目搭建以及一些使用经验

Vue 官方文档 : https://cn.vuejs.org/v2/guide/components.html

1.安装 node.js

https://nodejs.org/zh-cn/

2.【方法一】yarn 的安装，并使用 yarn 安装 vue

Yarn是facebook发布的一款取代npm的包管理工具。

1. 下载node.js，使用npm安装

   npm install -g yarn 
   

2. 查看版本：

   yarn --version
   

3. Yarn 淘宝源安装

   yarn config set registry https://registry.npm.taobao.org -g 
   yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
   

4. yarn 安装 vue

   yarn global add vue
   

5. yarn 安装 vue-cli

   yarn global add vue-cli
   

3.【方法二】npm 的换源，并使用 npm 安装 vue

1. npm 换源

    npm config set registry https://registry.npm.taobao.org
   

2. npm 安装 vue

   npm install vue -g
   

3. npm 安装 vue-cli

   npm install vue-cli -g
   

4.创建项目

vue init webpack 项目名

Project name 项目名 (不要大写)

Project description 项目描述 (默认回车就行)

Author (会默认显示你的用户,默认回车就行)

Vue build (有两个选项,默认回车第一个就行)

Install vue-router (Y/n) (输入 y, 回车)

Use ESLint to lint your code? (Y/n) (输入 n, 回车)

Set up unit tests (Y/n) (输入 n, 回)

Setup e2e tests with Nightwatch? (Y/n) (输入 n, 回)

Should we run ‘npm install’ for you after the project has been created? (两个选项,选择 yarn,前提是之前的步骤你安装了 yarn)

6.进入项目根路径启动项目

cd 项目名
npm run dev

以下在项目根路径执行

7.安装 webpack

yarn add vue webpack

8.安装 webpack-cli

yarn add webpack-cli -D   

（ 如果你用的webpack4.XX版本就一定要装 webpack-cli ，否则会报错）

webpack4 会有许多不兼容，建议卸载并下载安装指定版本

卸载命令：

npm uninstall webpack -g

npm uninstall webpack-dev-server -g

指定版本下载：

yarn add webpack@3.6

yarn add install webpack-dev-server@2.9.7

9.安装 element-ui

yarn add element-ui -S 

10.安装 less

yarn add less less-loader -D

11.安装 axios

yarn add axios

12.安装 vue-cookies

yarn add install vue-cookies

笔记：

1. 全局变量

2. 动态路径

3. 引用子组件

4. 子传父

5. 父传子 attention：props 传递过来的参数可直接 this使用，且data中不可定义同名变量

6. active 动态

7. 父子组件创建挂在先后顺序

CSS

1.始终铺满全屏

html, body {
    margin:0;
    padding:0;
    height: 100%;
}
<-- 然后让 div 的 height 也 100% -->

2.中文自动换行，但是英文不自动换行

span{
	white-space: normal;
	word-wrap: break-word;
}

3.垂直居中

#father{
	position: relative;
}
#child{
	position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

js

1.拷贝一个对象

let data = JSON.parse(JSON.stringify(res.data))

2.$qs 的数据里存在对象传到后端为None的解决办法

let data = this.$qs.stringify({
           		new_annotation_data:JSON.stringify(this.annotation_data)
           })

3.v-if 、v-show 在页面刷新时，不满足条件值的标签会闪现的解决办法

// 标签上加上 v-clock
<div v-if='false' v-clock>
</div>

// css中
[v-clock]{
    display:none
}

4.给网页加上快捷键

// 拦截键盘按键
document.addEventListener('keydown',this.handleEvent)

// 绑定的触发方法
handleEvent(event){
	// 83 -> S  拦截 ctrl+S
    if(event.keyCode === 83 && event.ctrlKey){

        this.save();   // 自定义事件

        event.preventDefault(); // 阻止默认事件

        event.returnValue = false;

        return false;
    }
},

5.监听对象内部变动

form:{
    handler(val, oldVal){
        console.log("b.c: "+val, oldVal);//但是这两个值打印出来却都是一样的
    },
        deep:true
}

6.字符串去空格并以特定字符串分割

str.replace(/\s*/g,"").split("-")

7. Vue 读入三方 JS

require('../assets/js/anno')

8.加阴影加边框

border: solid 1px #dddddd;
box-shadow: 0px 0px 6px #d8d8d8;

9. 浏览器警告(Emitted value instead of an instance of Error) <swiper-slide v-for=“img in images”>: component lists rendered with v-for should have explicit keys.

需要给:key来解决，避免重复

10.浏览器警告vue-router.esm.js?fe87:16 [vue-router] Duplicate named routes definition: { name: “Login”, path: “/login” }

将相同 name 和 component 变为重定向

路由修改前：
    {
      path: '/',
      name: 'Login',
      component: Login,
    },
    {
      path: '/login',
      name: 'Login',
      component: Login,
    }
路由修改后：
	{
      path: '/',
      redirect: {
        name: 'Login'
      }
    },
    {
      path: '/login',
      name: 'Login',
      component: Login,
    },

11.Bus作为组件间传值时，需在销毁时注销

// 注册
Bus.$on()
// 注销
Bus.$off()

12.实时刷新

websocket () {
        if ("WebSocket" in window) {
            this.$message.success("您的浏览器支持 上传状态实时展示!");

            // 打开一个 web socket
            let ws = new WebSocket("ws://10.5.5.66:7777/path/");

            // ws.onopen = function () {
            //     // Web Socket 已连接上，使用 send() 方法发送数据
            //     ws.send("发送数据");
            //     alert("数据发送中...");
            // };
            let that = this
            ws.onmessage = function (evt) {
                var received_msg = evt.data;
                that.tableData = JSON.parse(received_msg).data                
            };

            ws.onclose = function () {
                // 关闭 websocket
                alert("连接已关闭...");
            };
        }
        else {
            // 浏览器不支持 WebSocket
            this.$message.warning("您的浏览器暂不支持 上传状态实时展示! 请手动刷新!");
        }
},

13.IE浏览器报Promise未定义的错误, 解决办法：

1. npm install babel-polyfill --save

2. 在main.js中 import "babel-polyfill"

3. 如果使用了vuex，则在vuex的index.js文件中也要  import "babel-polyfill"，最好放在 import Vuex from 'vuex' 的前面

14.table + 分页

html:

<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
    <el-table-column prop="business_number" align="center" label="业务编号" ></el-table-column>
    <el-table-column prop="uploader" align="center" label="上传者" ></el-table-column>
    <el-table-column prop="file_name" align="center" label="文件名称" ></el-table-column>
    <el-table-column prop="upload_time" align="center" label="创建时间" ></el-table-column>
    <el-table-column prop="zip_status" align="center" label="Zip状态" ></el-table-column>
</el-table>
<el-pagination background layout="prev, pager, next" :total="total" @current-change="current_change"></el-pagination>

data:

{     tableData: [],
      pagesize:10,
      currentPage:1,
      total: 30
}

method:

current_change(currentPage){
	this.currentPage = currentPage;
},