Vue cli基础知识

安装VUE npm install -g @vue/cli

Vue 项目管理器 vue ui

npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm
npm uninstall -g @vue/cli //卸载vue-cli
cnpm install -g @vue/cli //安装vue/cli

npm install -g npm //更新npm

npm i -S //npm i –save 包名会被注册在package.json的dependencies里面，用户发布环境，生成上所需要的依赖包;
npm i -D //npm i –save -dev 包名会被注册在package.json的devDependencies里面，用于本地环境开发时候所需要的依赖包。

Src目录：整个项目的源代码
/main.js 项目的入口文件
/app.vue 是项目原始根组件
/assets 存放图片

多页优点：首屏时间快，SEO效果好；缺点：页面切换慢
单页优点：页面切换快；缺点：首屏时间稍慢，SEO差

需要通过计算的变量，优先使用计算属性，再次侦听器，再次才是函数，可以在模板中直接用函数

如：{{fun()}}。计算属性和侦听器都具有缓存性质

冒号用法里面是表达式、对象、数组、变量

:class=”{a:true}”
:class=”1” //数字1
class=”1” //字符串1

set方式新增或修改元素

set方式向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新

<template>
    <div id="home">  
        <template v-for="item of list">
            <p>list: {{item}} </p>
        </template>
        <hr/>
        <template v-for="item of obj">
            <p>obj: {{item}} </p>
        </template>
        <hr/>
        <button @click="addone">add-1</button>&emsp;&emsp;
        <button @click="addtwo">add-2</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                list: [1, 2, 3],
                obj:{
                    'a':'11',
                    'b':'22',
                    'c':'33'
                }
            };
        }, 
        methods: { 
            addone(){                 
                //新增6、4
                this.list.splice(3,0,6)
                this.obj['d']='44'
            },
            addtwo(){               
                //新增7、5 
                const that=this  
                this.$set(that.list,3,7)
                this.$set(that.obj,'e','55')
            }
        }
    }
</script>

当打包后app.js超过2mb时

才建议采用异步组件加载功能。就是不在头部import，在引用的地方()=>import(……)
如router规则 或 组件components属性

配置文件vue.config.js

当运行npm run serve时是执行的vue-cli-service命令
只要是执行了vue-cli-service，就会走vue.config.js
但如果在vue.config.js中console.log()打印，并不会执行。因为只是读取配置，并不是执行js
注意：
1、修改了vue.config.js，需要重新npm run serve才会起效
2、ts模型下文件名仍然是vue.config.js，而不是.ts

配置反向代理

module.exports = {
  devServer: {    
    proxy: {
      // 当地址中有/api的时候会触发代理机制
      "/api": {
        // 要代理的服务器地址  这里不用写 api
        target: "https://api.imooc-admin.lgdsunday.club/",
        changeOrigin: true, // 是否跨域
      },
    },
  },
};