新建vue3+vite2+naiveui项目

新建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>

• 运行查看效果

点击加一