vite搭建vue3,vue3使用路由,vite配置文件路径

搭建vue3

​ 通过脚手架搭建vue3.0

​ 1.vue-cil

​ 2.vite(推荐使用vite:快速冷启动（秒开）,即时的模块热更新,按需编译)

全局安装vite
	npm i -g create-vite-app
使用vite1.0搭建项目
	create-vite-app 项目名
使用vite最新版本
	npm init vite@latest 项目名
	指定使用模板
	npm init vite@latest 项目名 --template vue
安装依赖
	npm i
运行项目
	npm run dev
卸载vite
	npm uninstall -g create-vite-app

vue3挂载实例

createApp(App).mount('#app')
将App组件挂载到index.html中的#app上

vue3的template标签可以拥有多个子标签

vue3使用路由

vue3只支持路由4.0以上的版本
	npm install vue-router@4 --save
	
编写映射关系

在vue3使用createRouter创建路由实例
import { createRouter, createWebHistory } from 'vue-router'

通过懒加载引入组件
const Home = () => import('../view/Home.vue')
const Two = () => import('../view/Two.vue')
const Three = () => import('../view/Three.vue')
const My = () => import('../view/My.vue')

映射关系
const routes = [
    {
        path:'/',
        redirect:'/home'
    },
    {
        path: '/home',
        name: 'Home',
        component: Home
    },
    {
        path: '/two',
        name: 'Two',
        component: Two
    },
    {
        path: '/three',
        name: 'Three',
        component: Three
    },
    {
        path: '/my',
        name: 'My',
        component: My
    }
]
export default createRouter({//将实例暴露出去
    history: createWebHistory(),//设置路由模式
    routes
})

在main.js中全局引入
	import router from './router'
挂载到vue实例上
    createApp(App).use(router).mount('#app')

获取路由实例

import { useRouter ,useRoute} from "vue-router"
const router = useRouter()
router.push({name:'particulars',query:{id}})
或者通过proxy.$router.push({name:'particulars',query:{id}})

vite配置自动打开浏览器

//在根文件vite.config.js中配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    open: true,//启动项目时，在浏览器中自动打开程序
  }
})

vite配置路径名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
resolve: {
	alias: [{
		find: "@",
		replacement: path.resolve(__dirname, 'src')
	}, {
		find: "components",
		replacement: path.resolve(__dirname, 'src/components')
	}, {
		find: "vites",
		replacement: path.resolve(__dirname, 'src/view')
	}]
},
	plugins: [vue()]
})

vite配置通过ip地址打开页面

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [vue()],
	server: {
		host: '0.0.0.0',
		port: 3000,
		// 是否开启 https
	https: false,
	}
})

打包文件

npm run build