命令

下载脚手架（全局）

npm install -g @vue/cli

或者

yarn global add @vue/cli

脚手架初始化项目

vue-cli -

构建项目

vue create 文件名

或者

vue ui

打包项目

npm run build

运行项目

npm run serve

安装命令

npm i

等同于

npm install

卸载

npm uninstall

该命令会在项目中更新或者下载新的依赖包之后自动运行，如果你在项目中使用了具有已知安全问题的依赖，就收到官方的警告通知。

npm audit

axios

cnpm install --save axios

进度条

cnpm install --save nprogress

进度条的使用

// start：进度条开始 done：进度条结束  一般放在请求/响应拦截器里
nprogress.start();
nprogress.done();

路由配置

Vue2 路由插件使用 vue-router 3.X版本

npm i vue-router@3

Vue3 路由插件使用 vue-router 4.X版本

npm i vue-router@4

路由参数

import Vue from "vue";
import VueRouter from "vue-router"

Vue.use(VueRouter)

import Home from "@/pages/Home"  
import Shop from "@/pages/Shop"
import Search from "@/pages/Search"  

export default new VueRouter({
    // 路由配置
    routes:[
        {
            path:"/",
            redirect:"/home",
        },
        {
            path:"/home",
            // redirect:'/',
            component:Home,
            meta: { show: true }
        },
        {
            path:"/shop",
            component:Shop
        },
        {    
            // :keyword 为params参数占位   ?为设置该参数 可传可不传
            path:"/search/:keyword?",
            component:Search,
            meta: { show: true },
            name:"search",
            //路由组件能否传递props参数
            // 1.布尔值写法：params
            // props:true
            // 2.对象写法  额外给路由组件传递一些props参数
            // props:{
            //     a:1,
            //     b:2
            // },
            // 3.函数写法（常用） 可以params参数、query参数，通过props传递给路由组件
            //      写法1
            // props:($route)=>{
            //     return {keyword:$route.params.keyword,k:$route.query.k.toUpperCase()}
            // },
            //         写法2
            props:($route)=>({keyword:$route.params.keyword,k:$route.query.k})

        }
    ]
})

路由参数传递

export default{
    name: "aa",
    data(){
        return{
            keyword: "" 
        }
    },
    methods:{
        //路由传递参数
        goSearch(){
            // 1、字符串形式
            // this.$router.push("/search/" + this.keyword + "?k=" + this.keyword.toUpperCase());
            // 2、模板字符串
            // this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)
            // 3、对象（常用） 对象写法可以是name、path 其中path写法不可以与params参数一起使用
            this.$router.push({
                name   : "search",
                params : {keyword:this.keyword},// "" || undefined 解决传递空串url问题
                query  : {k:this.keyword.toUpperCase()}
            });
        }
    }
}

点击事件

@click触发

<button @click="goSearch">搜索</button>

Vuex

状态管理

cnpm install --save vuex

懒加载

　　 Vue懒加载（LazyLoad）一直是前端的优化方案之一。简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。
　　 它的核心思想是：当用户想看页面某个区域时，再加载该区域的数据。这在一定程度上减轻了服务器端的压力，也加快了页面的呈现速度。
　　 懒加载多用于图片，因为它属于流量的大头。最典型的懒加载实现方案是先将需要懒加载的图片的src隐藏掉，这样图片就不会下载，然后在图片需要呈现给用户时再加上src属性。

//同步加载
import XXX from "./XXX"

//异步加载(懒加载)
const XXX = () => import("./XXX")

组件

element UI
arco.design

对象空值过滤

const obj = {
  a: 1,
  b: null,
  c: undefined,
  d: '',
  e: 0,
  f: false
};

const filteredObj = Object.fromEntries(
  Object.entries(obj).filter(([key, value]) => value != null && value !== '')
);

console.log(filteredObj); // {a: 1, e: 0, f: false}

在上面的代码中，我们先使用 Object.entries() 方法将对象转换成一个由键值对组成的数组，然后使用 Array.prototype.filter() 方法过滤掉没有值的属性。

最后，使用 Object.fromEntries() 方法将过滤后的数组转换成一个新的对象。

错误解决

• 定义了但未使用的警告

如 ： XX component has been registered but not used
解决办法：在package.json文件中找到eslintConfig -> rule 添加以下规则

"vue/no-unused-components": "off"

正则匹配空值

const regExp = /^\s*$/;
function isNullOrWhitespace(str: string | null | undefined): boolean {
  return str == null || regExp.test(str);
}

websocket 长链接

npm install websocket

安装后项目中各项操作：

// 链接WS
const ws = new w3cwebsocket('ws://43.143.82.69:9502')
ws.onopen = () => {
  console.log('连接')
}
ws.onmessage = (e) => {
  console.log('收到：',e.data)
}
ws.onclose = () => {
  console.log('关闭连接')
}
ws.onerror = (e) => {
  console.log('错误：',e)
}

End