别的不多说,开始动爪把,
首先安装vue-cli 麦克:<代码> sudo npm安装- g @vue/cli
github:
https://github.com/XinYueXiao/vue-routes
<强> 1.1创建测试项目vue创建vue-routes
<强> 1.2创建成功,启动项目,纱为
在http://localhost: 8080/就可以看到欢迎:鼓掌:页面了
<强> 1.3搞点自定义配置,新建vue.config.js
const title=八?1剁手啦”
const端口=' 1111 '
模块。出口={
publicPath:‘/wxy ',//自定义端口号
devServer: {
港口
}，//自定义变量
configureWebpack: {
标题名称:
}
}
配置完成后重新启动<代码>纱服务>
<>强如何配置svg图标
1)准备一个svg,例如:<代码> src/图标/svg hg.svg
2)安装装载机<代码>纱添加svg-sprite-loader
3)对配置进行链式操作即可修改装载机
const path=要求(“路径”)//处理地址
函数解决(dir) {
返回路径。加入(__dirname dir)
}
模块。出口={
…,
chainWebpack(配置){//安装加载程序,对配置进行链式操作即可修改机,插件//1。svg规则中要排除图标目录
config.module.rule (svg)//转换为绝对地址
.exclude.add(解决(src/图标))//查看配置后svg规则vue检查——规则svg//2 .添加一个规则图标
config.module.rule(图标)
test(美元/\ ./)
.include.add(解决(src/图标))指标()最终
.use (“svg-sprite-loader”)
.loader (“svg-sprite-loader”)
.options ({
symbolId:”图标-[名字]”
}）
}
}
4) svg规则中要排除图标目录后配置
5)添加一个规则图标配置
6)新建<代码> src/组件/SvgIcon。vue 模板
& lt; template>
& lt; svg:类=" svgClass " aria-hidden=" true " v=" $听众"比;
& lt;使用xlink: href=" https://www.yisu.com/zixun/iconName " rel=巴獠縩ofollow”/比;
& lt;/svg>
& lt;/template>
& lt; script>
出口默认{
名称:“SvgIcon”,
道具:{
iconClass: {
类型:字符串,
要求:真正的
}，
名称:{
类型:字符串,
默认值:"
}
}，
计算:{
iconName () {
返回的#图标- $ {this.iconClass} ';
}，
svgClass () {
如果(this.className) {
返回“svg-icon”+ this.className;
其他}{
返回“svg-icon”;
}
}
}
};
& lt;/script>
& lt; scoped>风格;
.svg-icon {
宽度:1 em;
身高:1 em;
vertical-align: -0.15 em;
填充:currentColor;
溢出:隐藏;
}
& lt;/style>
7)新建<代码> src/图标/index.js 在main.js下引入图标
//src/图标/index.js
从“Vue”进口Vue
从“@/组件/导入SvgIcon SvgIcon”//图标自动加载
const点播=require.context (”。美元/svg的,假的,/\ ./)
req.keys () . map(要求)
Vue.component (svg-icon, SvgIcon)//main.js
进口”。/图标”;
8)在App.vue引入图标
& lt; svg-icon图标类=" hg "祝辞& lt;/svg-icon>
效果如下:
何为守卫,即为阻止无身份者进入组织内部
安装纱添加vue-router控制路由
安装纱添加vuex存储身份认证
