网站开发项目搭建
零基础安装VScode、Node.js配置，安装配置element-plus、pinia和vue-router项目依赖
一、Node.js环境配置
1.在Visual Studio Code官网下载VSCode安装包，选择合适路径到电脑上进行安装。
打开Node官网（Nodejs.org)下载最新版本Node.js.
2.打开系统-系统信息-高级系统设置-环境变量，在系统变量的位置新建变量：
NODE_HOME //变量名
D:\DesignApp\Node_js\node-v20.11.1-win-x64//变量值（为Node.js安装路径）
/*PATH变量修改*/
%NODE_HOME% //新建环境变量
D:\DesignApp\Node_js\node_global//新建路径
3.打开cmd终端，测试：
npm -v
//输出版本号
npm config set cache D:\...\node_cache //此为该新创文件夹的路径
npm config set prefix D:\...\node_global //此为该新创文件夹的路径
npm config set registry http://registry.npmmirror.com/
npm config list //确定编写无误
//回车确定
cache = "D:\\DesignApp\\Node_js\\node_cache"
prefix = "D:\\DesignApp\\Node_js\\node_global"
registry = "https://registry.npmmirror.com/"
; node bin location = D:\DesignApp\Node_js\node-v20.11.1-win-x64\node.exe
; node version = v20.11.1
; npm local prefix = D:\DesignApp
; npm version = 10.2.4
; cwd = D:\DesignApp
; HOME = C:\Users\Users
; Run `npm config ls -l` to show all defaults.
至此完成Node.js配置
二、在完成VScode安装基础上，安装相关插件
打开VScode，点击左边导航栏扩展处，搜索Chinese中文、Vue-Official\Vue 3 Snippets和Vue VScode Snippets以及Product Manager，方便管理文件。
1.element-plus配置
打开官网element-plus.org，学习相关安装入门知识，点击安装，复制
npm install element-plus --save到VScode终端中粘贴，按回车进行安装。
2.pinia
到官网pinia.vuejs.org，学习知识并安装，复制
npm install pinia到终端，等待安装完成。
3.vue-router
官网router.vuejs.org 安装，复制
npm install vue-router@4到终端，安装完成。
基本环境搭建完成，依赖导入成功
跳转功能展示代码块
//App.vue文件代码
<template>
<router-view></router-view>
</template>
<style>
body {
margin: 0;
overflow-x: hidden;
}
</style>
//index.vue代码文件
<template>
<div><h1>Man What Can I Say</h1>
<el-button type="primary" @click="$router.push('/news')">下一句</el-button>
</div>
</template>
<script setup>
</script>
<style scoped></style>
//news.vue文件代码
<template>
<div><h1>Mamba Out!!!</h1></div>
</template>
<script setup>
</script>
<style scoped></style>
//router文件夹内 index.js文件代码
import { createRouter, createWebHistory } from "vue-router";
const routes =[
{
path:"/",
redirect:"/index",
},
{
path:"/index",
component:()=>
import("@/views/index.vue"),
}, {
path:"/news",
component:()=>
import("@/views/news.vue"),
},
];
const router = createRouter({
history:createWebHistory(),
routes,
});
export default router;
//main.js文件代码
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import './style.css'
import App from './App.vue'
import router from './router'
createApp(App).use(router).use(createPinia()).mount('#app')