vue新建一个页面
文章描述：
vue项目创建成功后如何新建一个自定义vue页面，并且可以访问
配置
1、src/views/下面新建一个SignInView.vue文件
2、vue.config.js
设置实时更新
后台接口以及端口
const { defineConfig } = require("@vue/cli-service");
const path = require('path')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
configureWebpack:(config)=>{
config.resolve = {
extensions :['.js', '.json', '.vue'],
alias:{
'@': path.resolve(__dirname,'./src'),
}
}
},
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000', // 后台接口地址
ws: true, //如果要代理 websockets，配置这个参数
secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite:{ // 重写路径
'^/api':'/api'
}
}
}
}
});
3、src/App.vue
<template>
<div id="app">
<keep-alive>
<router-view />
</keep-alive>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>4、src/router/index.js
设置路由
{
path: "/signin",
name: "signin",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/SignInView.vue"),
},
发布时间：2022/11/03
发表评论