Vue3开发 Vue cli3的使用

1、Vue-Cli3简介

Cli是Command-Line Interface命令行界面，俗称就是脚手架。Vue-Cli用于快速搭建Vue开发环境以及对应的webpack配置，它可以帮助我们构建目录结构，部署，热加载，代码单元测试等功能，是一个用于快速开发的脚手架。

vue-cli3创建项目，后面的选项自定义不做累述。

vue create 项目名称

2、如何改变URL但是页面不会发生刷新

两种方法
1、修改location.hash值
2、使用history对象
history.pushStatus({},’’,’/url’);
history.back();
histroy.replaceStatus({},’’,’/url’);
histroy.go()

3、配置资源路径的别名

在我们的项目中，有类似如下./向上查找的资源路径配置，这种方式移植性较差，且不易阅读。我们就可以尝试在项目中而配置资源目录的别名来解决这些的问题。

<img src="../../img/购物车.png" alt="">

那么如何配置资源路径的别名呢，Vue Cli3中将我们的配置文件隐藏起来了，用户想要自定义的配置的话就需要在项目的根目录创建一个vue.config.js的文件。下面是别名的配置方式：

const path = require("path");
function resolve(dir) {
    return path.join(__dirname, dir);
}

module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            .set("@", resolve("src"))
            .set("assets", resolve("src/assets"))
            .set("components", resolve("src/components"))
            .set("views", resolve("src/views"))
        // .set("base", resolve("baseConfig"))
        // .set("public", resolve("public"));
    },
}

以.set(“components”, resolve(“src/components”))为例，这里是将’components’作为src/components目录的别名。即我们在项目中可以使用components代替src/components，例：

import TabBar from "components/tabbar/TabBar";
import TabBarItem from "components/tabbar/TabBarItem";

需要注意的是在HTML的src资源引入时不能直接使用目录别名，需要在别名前加上~号

 <img src="~assets/img/tabbar/分类-active.png" alt="">

最后：博主在添加vue.vonfig.js配置文件的时候，没有重启服务，配置文件并没能生效。故提醒各位好友配置以后一定不要忘记重启一下服务。