新建vue3+vite2+naiveui項目

一、構建vite2項目

使用命令行構建

npm init @vitejs/app

設置項目名

選擇vue模板（上下方向鍵選擇）

這里我選擇js版

用你的IDE打開項目，這里我選擇vscode

安裝依賴和啟動vite

npm i

npm run dev

黃色的字為正常情況，可忽視

運行成功

二、引入naiveui

安裝

npm i -D naive-ui

npm i -D vfonts

編輯App.vue試試效果

<template>
  <n-button>naive-ui</n-button>
</template>

<script setup>
// 推薦按需引入組件
import { NButton } from 'naive-ui'
</script>

<style>
</style>

運行查看效果

三、安裝vue-router和vuex

命令行安裝

npm i vue-router@next vuex@next -S

新建router、store、views文件夾

在views文件夾下新建home.vue文件

<template>
  <n-space>
      這里是主頁
    <n-button>Default</n-button>
    <n-button type="primary">Primary</n-button>
    <n-button type="info">Info</n-button>
    <n-button type="success">Success</n-button>
    <n-button type="warning">Warning</n-button>
    <n-button type="error">Error</n-button>
  </n-space>
</template>

<script setup>
import { NButton } from 'naive-ui'
</script>

<style>
</style>

在router文件夾下新建index.js文件

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

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/', component: () => import('../views/home.vue')}
    ]
})

export default router

編輯main.js

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

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

編輯App.vue

<template>
  <n-button>naive-ui</n-button>
  <!-- 這里引入router-view -->
  <router-view/>
</template>

<script setup>
// 推薦按需引入組件
import { NButton } from 'naive-ui'
</script>

<style>
</style>

運行vite查看路由效果

在store文件夾下新建index.js文件

import { createStore } from 'vuex';

export default createStore({
  state: {
    counter: 0
  },
  mutations: {
      add(state) {
          state.counter++
      }
  }
})

修改main.js文件

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

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

修改App.vue

<template>
  <n-button>naive-ui</n-button>
  <!-- 這里測試store是否生效 -->
  <p @click="$store.commit('add')">{{$store.state.counter}}</p>
  <!-- 這里引入router-view -->
  <router-view/>
</template>

<script setup>
// 推薦按需引入組件
import { NButton } from 'naive-ui'
</script>

<style>
</style>

運行查看效果

點擊加一

總結

以上是生活随笔為你收集整理的新建vue3+vite2+naiveui项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。