vite搭建vue項目 + element plus + 路由router + 全局樣式布置

vitevite搭建vue項目

windows + R　　輸入cmd 進入終端

cd..

cd D:\Vue\vite\text　　進入要創建項目的文件夾下　　

1. npm init @vitejs/app　　進入用vite搭建項目　　　　　　 //  npm init @vitejs/app my-vue-app --template vue　//　create-vite-app project-name
2. project-demo　　輸入項目名字
3. vue　　下移選擇第二個vue搭建vue項目

 

1. npm cd project-demo　　進入創建的項目目錄
2. npm i　　安裝 npm instal
3. npm run dev　　啟動項目

 

報錯：

events.js:292
      throw er; // Unhandled 'error' event
      ^

Error: spawn D:\Vue\vite\graduation\graduation\node_modules\esbuild\esbuild.exe ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
    at onErrorNT (internal/child_process.js:465:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21)
Emitted 'error' event on ChildProcess instance at:
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
  code: 'ENOENT',
  syscall: 'spawn D:\\Vue\\vite\\graduation\\graduation\\node_modules\\esbuild\\esbuild.exe',
  spawnargs: [ '--service=0.9.7', '--ping' ]
}

node node_modules/esbuild/install.js

npm cache clean --force

npm install

npm run dev

---

 

導入element plus

1. npm install element-plus --save　　在項目的終端中安裝（每一個項目都要重新裝）

2. 在 main.js 中寫入以下內容：（全局引入）

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')　　//要在最下面

 

---

 

路由router

npm install vue-router@next --save　　在項目中安裝路由router

在src目錄下創建 router 文件夾，添加 index.js 文件

在src目錄下創建 view 文件夾，添加 welcome.vue 文件 

配置router文件，在 index.js 中寫入：

import {createRouter, createWebHashHistory} from 'vue-router';
// 1. 定義路由組件， 注意，這里一定要使用 文件的全名（包含文件后綴名）
import welcome from "../view/welcome.vue";

const routes = [
    { path: "/", redirect: '/welcome' },
    { path: "/welcome", component: welcome }
]

// Vue-router新版本中，需要使用createRouter來創建路由
export default  createRouter({
// 指定路由的模式,此處使用的是hash模式
history: createWebHashHistory(),
routes // short for `routes: routes`
})

在main中引入router，在 main.js 中寫入：

import router from './router/index'

app.use(router)
app.mount('#app')　　//要在最下面

可以在項目中使用  <router-view></router-view>  使用路由了

 

---

 

引入全局樣式css文件

創建 index.css 文件,寫入全局的樣式:

html,body,#app{
    /* width: 100%; */
    height: 100%;
    margin: 0;
    padding: 0;
}

在main中引入css文件, 在main.js 文件中寫入:

import CSS from '../index.css'

app.use(CSS)
app.mount('#app')　　//要在最下面