vuecli3+vite+typescript+element项目搭建

vite中文官网地址https://vitejs.cn/https://vitejs.cn/

项目初始化地址:https://gitee.com/zhouyunfang_admin/vue3-typescript-vite-element/tree/req_1.0/

项目搭建

npm init vite@latest

? Project name: » vue3-ts
Select a framework: » vue
Select a variant: » vue-ts

进入项目目录

cd vue3-ts 

下载依赖

npm install

启动项目

npm run dev

---

解决 Network: use `--host` to expose

在根目录下找到vite.config.ts文件

 //在文件中粘上这一段代码
 server: {
    host: '0.0.0.0',//解决 Network: use `--host` to expose
    port: 8080,
    open: true
  }

export default defineConfig({
  plugins: [vue()],
  server: {
    host: '0.0.0.0',//解决 Network: use `--host` to expose
    port: 8080,
    open: true
  }
})

---

vite 配置@别名 

npm install @types/node --save-dev

在vite.config.ts文件中加入

import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  server: {
    host: '0.0.0.0',//解决 Network: use `--host` to expose
    port: 8080,
    open: true
  },
  resolve: {//配置别名
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, 'src')
      }
    ]
  }
})

使用方式:

import HelloWorld from '@/components/HelloWorld.vue'

安装路由

npm install vue-router@4

在src下新建router目录，然后新建index.ts文件

// vue2-router
const router = new VueRouter({
  mode:  history ,
  ...
})

// vue-next-router
import { createRouter, createWebHistory } from  'vue-router'
const router = createRouter({
  history: createWebHistory(),
  ...
})

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Layout from '../components/HelloWorld.vue'

const routes: Array = [
  {
    path: '/',
    name: 'Home',
    component: Layout
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

main.js文件下引用

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

createApp(App).use(router).mount('#app')

 修改App.vue为如下所示