VS code编辑器
VSCode(Visual Studio Code)是由微软开发的一款轻量级、强大的跨平台开源代码编辑器。
- 打开编辑器,进入到需要创建项目的目录
- 在编辑器中找到运行,找到新建终端,然后新建一个终端
- 终端运行以下命令,创建一个新的项目
npm init vite web -- --template vue3
? "vue3" isn't a valid template. Please choose from below: » - Use arrow-keys. Return to submit.'
Vanilla
> Vue #(这里选择vue)
React
Preact
Lit
Svelte
Others
√ "vue3" isn't a valid template. Please choose from below: » Vue
? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript #(这里选择JavaScript)
TypeScript
Customize with create-vue ↗
Nuxt ↗
Scaffolding project in E:\博客\web...
Done. Now run:
cd web
npm install
npm run dev
- 进入到项目目录,运行创建项目时给出的命令
cd web
npm install
npm run dev
运行完成后可以看到下列输出
此时,我们按住键盘上的ctrl建,鼠标点击 http://localhost:5173/
,可以在浏览器中打开我们创建的项目
Element Plus
Element Plus 是一套基于 Vue 3.0 的桌面 UI 组件库,是对 Element UI 的升级和重构版本。
- 安装element plus
npm install element-plus
- 在
src/man.js
中全局引入element plus
import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import ElenmentPlus from 'element-plus';
import 'element-plus/dist/index.css';
const app = createApp(App);
app.use(ElenmentPlus);
app.use(router);
app.mount('#app');
vue-router
Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用(SPA)。
- 安装vue-router,这里我们选择4版本
npm install vue-router@4
- 创建路由文件
src/ruer.js
import { createRouter,createWebHistory } from "vue-router";
const routerHistory = createWebHistory();
import Home from '../view/home.vue';
const router = createRouter({
history: routerHistory,
routes: [
{
name: Home,
path: '/',
component: Home
}
]
})
export default router
- 修改
src/main.js
,引入路由文件
import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import ElenmentPlus from 'element-plus';
import 'element-plus/dist/index.css';
import router from './router.js'; //添加这一行
const app = createApp(App);
app.use(ElenmentPlus);
app.use(router); //添加这一行
app.mount('#app');
到此,我们的项目构建完成,下一篇开始创建我们的项目首页