vue - 3 写配置文件的内容

俗话说： 工欲善其事,必先利其器

我们需要把一些基础工作先做好，比如一下的配置要先配置好

项目成功创建之后 --  了解了基本的配置文件  -- 第三步 启动文件

在package.json 里面写一个启动的脚本  

"start":"npm run serve"

 这个时候，我们再次启动服务器，就只需要输入 npm start  

我们还可以配置一些vue项目的启动文件  vue.config.js

 

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false , // 去掉Eslink 警告的
  publicPath:"",   // 设置打包相对路径 上线用的
  pwa:{             // 设置网站图标
    iconPaths:{
      favicon32:"favicon.ico",
      favicon16:"favicon.ico",
      appleTouchIcon:"favicon.ico",
      maskIcon:"favicon.ico",
      msTileImage:"favicon.icon"
    }
  },
  devServer:{         //服务器配置
    host:"localhost", //0.0.0.0
    port:9000,        //端口号
    open:true,        // 打开浏览器(每次启动自动打开浏览器)
    hot:true,         //自动更新
  }

})

!!! 记住修改了这个文件，请一定记得重启

 

 你可以去public 文件夹里面的 index 里面修改 title  取个你喜欢的名字

 

 这个时候 我们的网页名字就是我们取的这个名字啦♪(^∇^*)

还可以去设置图标，也是在public 文件夹，直接找一个favicon.ico 的图标，替换就可以啦~

接下来进入重点啦，写具体的项目配置内容了

src 板块  这个是我们的开发工具区 

我把内部的一些配置文件都删除了，重新自己配

原本应该是这样，但是页面显示的是vue的展示页面，现在我需要开启我的项目了，所以我清除了不需要的内容

 现在就变成了这个样子，我的网页上面也什么都没有了

我引入了全局的style 样式  （这个是很早之前就写好的，直接放入了src 里面 建了一个style 文档）

然后在main.js 里面引入全局的样式

这样我全局都可以使用这个样式啦~~ 

开始正式准备我要写的页面啦

先写上guid 和 errors 的页面 配置一下路由

 

//路由配置   route / index.js

import vue from 'vue'
import vueRouter from 'vue-router'

//0. 全局注册路由
vue.use(vueRouter)

//1.引入组件路由
import Guide from '../views/Guide/Guide.vue'

//2.配置路由规则
const routes =[
    {
        path:"/",
        redirect :"/guide"
    },
    {
        path:"/guide",
        name:"guide",
        component:Guide,
    }


]

//3.创建vue router 实例
conts router = new vueRouter({
    model:"history",
    routes,
})


//4.暴露挂载
export default router

后面就是按照自己项目新建页面，写自己的代码啦~~