Vue 基本笔记

1、安装Vue

1）查看版本

npm -v

2）升级npm

cnpm install npm -g

3) 升级或安装 cnpm

npm install cnpm -g

4) 最新稳定版

cnpm install vue --ignore-scripts

5）全局安装vue-cli

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用
npm install --global vue-cli

6）创建一个基于 webpack 模板的新项目

vue init webpack my-project
备注：my-project 为项目名

7）配置项目信息，根据提示，enter 即可

8）进入项目

cd my-project

9) 初始化node_modules

cnpm install

10）运行

cnpm run dev
访问地址：http://localhost:8080/
备注：淘宝镜像安装：npm install -g cnpm --registry=https://registry.npm.taobao.org

2、构建启动

     cnpm install  --ignore-scripts ==> 初始化安装node_modules
     cnpm run build ==> 项目编译构建，生成html
     cnpm run dev ==> 本地启动指令

3、项目目录解析

node_modules：npm 加载的项目依赖模块
        config:配置端口、域名等相关配置
            -|index.js：配置端口、域名、build 配置等
        src:开发的目录
            -|assets：图片存放
            -|components:组件文件
            -|App.vue：项目入口
            -|main.js：项目核心文件
        static:静态文件
        package.json：项目配置文件

4、操作组件

下述以Element-ui 为模板组件

1）安装指令版本组件

npm install element-ui @2.0.11 -S

2）卸载项目组件

npm uninstall element-ui

3）安装更新最新的组件

npm i element-ui -S

5、模板语法

1)数据绑定

-|文本：{{ ..}}
-|html:<div v-html="message"></div>

2)数据提示

this.$message.error({
                        message: msg
            });

3)调试显示

 console.log 等

6、基础指令

1）v-model

功能：用于双向绑定数据
     场景：指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
     自研：要合理使用该指令，特别是使用input 等的时候进行操作，在其他控件上要合理使用，好像不能达到需要的结果

2)v-bind

功能：用于绑定数据、样式等

 <div v-bind:class="{'class1': use}"></div>

场景：用于样式绑定等

3)watch

      功能：用来监测Vue 实例上的数据变动
      格式：
      watch：{
        demo(val){
             this.value = this.demo;
        }
      }
      监测对象：
       computed: {
          newName() {
            return this.demo.name;
          }
        },
        watch: {
          newName(val) {
            this.value = val;
          }
        }

4)v-loading

        功能：刷新表格数据等
         v-loading  = "loading";
         loading = true|false;
         场景：当前在使用在el-button、el-table上可预见效果

7、同步方法（async、await）

1)需要同步的方法

async function(id){
                let temp=[];
                await this.$https.get({
                    ....
                    temp = res.data;
                });
                return temp;
            }

2）调用同步方法

    this.function(id).then(function(result){
                    console.log(result);
            });

8、组件通信

1）可采用Vuex,具体可查看9,主要是全局变量的处理等

2）父子组件

        -|父传子
                 父组件使用方法：
                 script:
                     引入组件：import CodeBase from '../subgroup/CodeBase';
                     components：{
                                CodeBase
                     }
                 template:
                     <CodeBase :role="role" :paltformId="paltformId"></CodeBase>
                     子组件使用方法：
                     props: ["role", "paltformId"],//用于接受父组件的值
            -|子传父
                子组件使用$emit
                    this.$emit("sendPaltformId", type)
                父组件接收
                    <product @sendPaltformId="getPaltformId" ></product>
                    在methods :添加该方法getPaltformId即可

3）兄弟组件

    在globaljs 下引入bus.js
            具体内容：
            import Vue from 'vue'
            export default new Vue()
            发送方：
            import eventVue from '../../globaljs/bus.js'
            eventVue.$emit('sendDeployInfo', self.progressBuildId)
            接收方：
            import eventVue from '../../globaljs/bus.js'
            created: function() {
                this.getPlatInfoBrother();
            },
            getPlatInfoBrother() {
                eventVue.$on("sendDeployInfo", (message) => {
                    this.activeName = message
                })
            }

9、Vuex 的基本使用(全局变量)

1）安装

    npm install vuex --save

2）在src 目录下新建一个store 的文件夹

        新建store.js，内容模板如下
            import Vuex from 'vuex';
            Vue.use(Vuex);
            const store = new Vuex.Store({
                state
            });
          const state={//要设置的全局访问的state对象
             showFooter: true,
             changableNum:0
             //要设置的初始属性值
           };
           mutations: {
                newTitle(state, msg) {
                        state.showFooter = msg
                    },
           }
            export default store;

3）main.js 中引入

    import store from './store'//引入store
                new Vue({
                  el: '#app',
                  router,
                  store,//使用store
                  template: '<App/>',
                  components: { App }
                })

4）使用

    引入：this.$store.state.showFooter
            修改：this.$store.commit("newTitle","123");

10、页面引导

参考地址：https://blog.csdn.net/yyjourney/article/details/78962202
      采用的是iview 
         <Modal v-if="modalOFF === 1">

            <p>这里是对话框一</p>

           <button @click="modalOFF = 2"></button>
      </Modal>
      <Modal v-if="modalOFF === 2">

          <p>这里是对话框二</p>

        <button @click="modalOFF = 3"></button>
      </Modal>
      <Modal v-if="modalOFF === 3">

        <p>这里是对话框二</p>

       <button @click="modalOFF = null"></button>
      </Modal>
      js：modalOFF: 1,

11、兼容性IE

        参考地址：https://www.cnblogs.com/weiqinl/p/6794612.html
        报错信息：vuex requires a Promise polyfill in this browser
        解决方法：
            1）npm install --save babel-polyfill
            2）webpack.config.js：
                    module.exports = {
                      entry: {
                        app: ["babel-polyfill", "./src/main.js"]
                      }
                    };
        结果验证：最后结果验证是可以的，使用上述模块IE可以模拟ES6 的相关语法

12、Vue css 作用域

    引入一个子组件时：组件的css 样式会作用域全局；
      通常在Vue 中使用样式，会导致覆盖根组件的样式，如何实现在组件中一个样式
      在style 标签中添加scoped 属性，（css 的作用域）
      具体实例：

  <style scoped>
        h1{
           color:green
        }
  </style>

13、Vue 屏幕自适应

    -|建立一个Vue 项目进行测试Demo config/index.js 修改端口为8081
    cnpm i lib-flexible -S
    cnpm i px2rem-loader -D //使用太过麻烦，引入其他的css 会导致样式出问题

14、关闭eslint

    eslint 主要是对vue 代码和格式进行质量检查，但经常会引起很多报错，最好关闭
    build文件夹--->webpack.base.conf.js---->module：关闭和eslint 先关的东西