vite+vue3项目搭建初体验

 

目录

初始化项目

​项目搭建小细节

1.文件引入

2.vite启动后提示“Network: use `--host` to expose“，且无法通过网络IP访问服务

3.安装 vue-router，vuex

vue-router

vuex

4.安装 element-plus

按需引入

---

初始化项目

创建项目

全局安装vite
npm install -g create-vite-app

yarn create @vitejs/app <project-name>

# 或者
npm init @vitejs/app <project-name>

 此时按下回车，可以看到以下页面，博主选择的是 vue-ts（上下键可以切换选择的模板），按下回车之后会给你一个配置好了typescript 的 vite 配置模板

此时在你的项目已经创建成功啦 然后那npm i 安装依赖就可以运行了

cd vite-frontend-template
npm install
npm run dev

---

项目搭建小细节

1.文件引入

使用绝对路径需配置 "@"

webpack中可以通过resolve.alias定义项目路径别名，这样可以在引入文件时，不再需要使用相对路径，统一以根路径（/src/）作为起点。

vite同样支持路径别名的定义：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';
const pathResolve = (dir: string): any => {
  return resolve(__dirname, '.', dir);
};
const alias: Record<string, string> = {
  '/@': pathResolve('./src/'),
};

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: { alias },
  server: {				// ← ← ← ← ← ←
    host: '0.0.0.0'	// ← 新增内容 ←
  }
})

 如果你是刚创建的TypeScript项目，有可能会遇到找不到模块“path”或其相应的类型声明的错误提示，安装@types/node即可。

npm i --save-dev @types/node 

如果项目是TypeScript编写，还需要修改一下TypeScript的配置：

{
   // ...
  "compilerOptions": {
    // ...其他配置
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  // ...
}

---

2.vite启动后提示“Network: use `--host` to expose“，且无法通过网络IP访问服务

详情请跳转https://blog.csdn.net/z17864151193/article/details/123897689

---

3.安装 vue-router，vuex

npm i vue-router@next vuex@next

vue-router

 在main.ts文件中集成Vue-Router：

import { createApp } from 'vue';
import App from './App.vue';

import router from "./router";

const app = createApp(App);
app.use(router);
app.mount('#app');

在 src 目录下新建 router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
const routes: Array<RouteRecordRaw> = [
  {
    path: '',
    redirect: (_) => {
      return { path: '/home' }
    },
  },
  {
    path: '/home',
    name: 'HelloWorld',
    component: HelloWorld,
  },
  {
    path: '/about',
    name: 'About',
    // 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" */ '../components/About.vue'),
  },
  {
    path: '/:currentPath(.*)*', // 路由未匹配到，进入这个
    redirect: (_) => {
      return { path: '/404' }
    },
  },
]
const router = createRouter({
  history: createWebHistory(''),
  routes,
  scrollBehavior(to, from, savedPosition) {
    return {
      el: '#app',
      top: 0,
      behavior: 'smooth',
    }
  },
})
export default router

在 src 目录下再新建一个 components/About.vue 文件，内容如下：

<template>
  <h1>{{ msg }}</h1>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'About',
  data() {
    return {
      msg: 'About Page',
    }
  },
  setup() {},
})
</script>

vuex

在 src 目录下创建 store/index.ts

import { InjectionKey } from 'vue'
import { createStore, Store } from 'vuex'

export interface State {
  count: number
}

export const key: InjectionKey<Store<State>> = Symbol()

export const store = createStore<State>({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

最后修改下 App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <router-view />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
export default defineComponent({
  name: 'App',
  components: {
    HelloWorld
  }
})
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行之后，你可以看到如下页面http://localhost:3000/home

about 页面 http://localhost:3000/about

4.安装 element-plus

npm install element-plus --save

按需引入

修改 main.ts

import { createApp } from 'vue'
import { store, key } from './store'
import router from './router'
import App from './App.vue'

import { ElButton  } from 'element-plus'

const app = createApp(App)

app.component(ElButton.name, ElButton)

app.use(store, key)
app.use(router)
app.mount('#app')

样式按钮引入可以使用插件 vite-plugin-style-import - 安装 npm i vite-plugin-style-import -D

修改 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          resolveStyle: (name) => {
            return `element-plus/lib/theme-chalk/${name}.css` // 按需引入样式
          },
        },
      ],
    }),
  ],
})

在 About.vue 页面使用

<template>
  <h1>{{ msg }}</h1>
  <el-button type="primary">element-plus按钮</el-button>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'About',
  data() {
    return {
      msg: 'About Page',
    }
  },
  setup() {},
})
</script>

此时访问 http://localhost:3000/about，可以看到按钮已经出来了

源码地址：

https://github.com/coderlyu/vite-frontend-template​github.com/coderlyu/vite-frontend-template