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')　　//要在最下面