vue3.0教程——搭建Vue脚手架【简化版】

fangxinyzj.com 2025-05-28 13:45:32

哈喽，大家好丫，你们的小郭子又来啦 ~

一、环境要求

（1）node安装（前端开发环境）

?（2）vue-cli脚手架安装

二、安装依赖

?（1）使用命令行安装以下依赖

（2）通过?vue ui?命令以图形化界面来管理项目依赖

（3）导入你刚刚项目的地址?编辑

?（4）导入后，选择依赖

（5）安装依赖

（6）全部依赖下载完成后，引入到项目，并且编写demo?

?三、引入依赖

（1）router/index.js

（2）store/index.js

（3）main.js

（4）最终效果

?四、创建一个项目

（1）指令

（2）选择Vue3模板

?（3）创建和依赖下载

（4）进入目录，启动项目

（5）查看项目?

哈喽，大家好丫，你们的小郭子又来啦 ~

今天来聊一聊Vue3的项目搭建问题。

话不多说，直接上干货，嘻嘻嘻 ~

???????????????????????????????? vue3.0教程——搭建Vue脚手架【简化版】

一、环境要求

（1）node安装（前端开发环境）

? ? 打开node官网:https://nodejs.org/zh-cn/
? ? 下载node并安装（安装vue3建议node在10.0版本以上）。
? ? ?输入node -v可显示node版本?

如图所示:

vue3.0教程——搭建Vue脚手架【简化版】

?（2）vue-cli脚手架安装

全局安装npm install -g @vue/cli?

vue3.0教程——搭建Vue脚手架【简化版】

?出现版本号表示安装完成了，如下显示安装成功

? ??? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? vue3.0教程——搭建Vue脚手架【简化版】

二、安装依赖

?（1）使用命令行安装以下依赖

npm install vuex ?vue-router ?element-plus ?axios ? -S

npm install less less-loader@5.0.0 ?-D

npm install vuex  vue-router  element-plus  axios   -S
npm install less less-loader@5.0.0 -D

（2）通过?`vue ui`?命令以图形化界面来管理项目依赖

vue ui

（3）导入你刚刚项目的地址

?（4）导入后，选择依赖

vue3.0教程——搭建Vue脚手架【简化版】

（5）安装依赖

(注意区分运行和开发依赖区别)

vue3.0教程——搭建Vue脚手架【简化版】

? vue3.0教程——搭建Vue脚手架【简化版】

（6）全部依赖下载完成后，引入到项目，并且编写demo?

???????????????????????????????????????? vue3.0教程——搭建Vue脚手架【简化版】

?三、引入依赖

（1）router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import guide from '../views/guide.vue'
 
 
const routes = [
  {
    path: '/',
    redirect: '/guide'
  },
  {
    path: '/guide',
    name: 'guide',
    component: guide
  },
  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "about" */ '../views/login.vue')
  }
]
 
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
 
export default router

（2）store/index.js

import { createStore } from 'vuex'
 
export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

（3）main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import store from './store'
import less from 'less'
 
createApp(App).use(store).use(router).use(ElementPlus).use(less).mount('#app')