vue项目实战-1初始化项目

原创已于 2022-12-09 09:13:20 修改 · 422 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

于 2022-12-07 21:31:33 首次发布

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Vite和Vue初始化项目，包括安装依赖、配置路由、设置文件别名等步骤，并演示如何引入Element Plus和Windicss。

项目初始化，npm 7+,需要额外的双短横线

 npm  init vite@latest <project-name> -- --template vue

引入elementPlus，在项目内打开命令行

npm install element-plus --save

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

引入Windi CSS ,在项目内打开命令行

npm i -D vite-plugin-windicss windicss

然后，在你的 Vite 配置中添加插件：

vite.config.js

import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}

最后，在你的 Vite 入口文件中导入 virtual:windi.css：

main.js

import 'virtual:windi.css'

使用组件用class = ".btn" 在stytle中 .btn{@apply bg-purple-500 text-indigo-50 }

引入vue router,在项目内打开命令行

npm install vue-router@4

新建router文件夹，新建index.js文件

import { 
    createRouter,
    createWebHashHistory
 } from "vue-router";

 const routes= []

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

 export default router

在main.js中使用

// 创建并挂载根实例
const app = Vue.createApp({})
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router)

app.mount('#app')

在vite.config.js中设置文件夹别名，使用 ~ 代替 src

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import WindiCSS from 'vite-plugin-windicss'
import path from  'path'
// https://vitejs.dev/config/
export default defineConfig({
  resolve:{
    alias:{
      "~":path.resolve(__dirname,"src")
    }
  },
  plugins: [vue(),WindiCSS()]
})

然后新建pages文件夹，在pages中新建页面index.vue,about.vue,404.vue ，到routes/index.js配置路由

import Index from "~/pages/index.vue"
 import About from "~/pages/about.vue"
 import NotFound from "~/pages/404.vue"

 const routes= [{ path: '/',  component: Index},
                { path: '/about', component: About},
                { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }]

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

项目完成初始化。