WEB前端项目开发——（一）（2024）

目录

1  通过Git Bash安装 vue-cli

2  创建项目

3  解决Git Bash方向键失效

4  重新进行项目创建

5  浏览器输入地址查看

6  案例——简单修改v3-calendar中的内容

7  测试页面效果

---

本篇文章介绍通过了Git Bash创建v3-calendar项目，之后对v3-calendar进行简单修改。

环境准备：

电脑要安装好Git、Visual Studio Code软件。

1  通过Git Bash安装 vue-cli

1. 在电脑“C:\Users\Administrator”下鼠标右击，点击“Open Git Bash here”打开Git Bash。

2. 如图，成功打开Git Bash。

3. 执行如下命令，通过"npm config set registry" 命令来设置npm的registry。

npm config set registry https://registry.npmmirror.com

4. 执行如下命令，在系统上全局安装webpack。注意：在此之前您需要确保您已经安装了Node.js和npm。

npm install webpack -g

5. 在命令提示窗口执行如下命令，全局安装 vue-cli。

npm install -g @vue/cli

6. 执行如下命令，查看版本。

vue -V

2  创建项目

执行如下命令，创建一个名为“v3-calendar”的项目。

vue create v3-calendar

回车创建项目，v3-calendar是项目名称，可以自定义项目名字，然后开始进入一系列问答环节，default是默认配置，空格键多选，回车执行该选项。

在上述图片中出现问答环节我们使用空格键、上下键可能无效，此时我们就要寻找办法解决它。

3  解决Git Bash方向键失效

1. 关闭Git Bash窗口，点击OK退出。

2. 在git bash的安装目录“C:\Program Files\Git\etc”下找到名为bash.bashrc的文件选中右击，通过Visual Studio Code打开（也可拖拽至Visual Studio Code打开）。

3. 打开后进入Visual Studio Code编辑界面，在文件最后添加如下代码并保存，若提示保存权限不足点击右下角提示框的“以管理员身份重试”即可。

alias vue='winpty vue.cmd'

4  重新进行项目创建

1. 保存完成后退出，重新回到“C:\Users\Administrator”文件夹下右击鼠标打开Git Bash，重新输入如下命令创建v3-calendar项目。

vue create v3-calendar

2. 如图，点击电脑上下键选择第三项“Manually select features”后按回车键。

3. 如图，使用电脑空格键和上下键选择（勾选）“Router”、“Vuex”、“CSS Pre-processors”三项后按回车键。

4. 如图，默认选择“3.x”后按回车键。

5. 如图，输入“Y”后按回车键。

6. 如图，使用电脑上下键选择第二项“Less”后按回车键。

7. 如图，默认选项，按回车键。

8. 如图，输入“N”后按回车键。

9. 如图，稍作等待。

10. 完成，注意提示命令：

cd v3-calender

npm run serve

11. 回到“C:\Users\Administrator”文件夹，我们会发现多出一个名为“v3-calendar”的文件夹，这便是我们刚刚在Git Bash中创建的v3-calendar项目文件夹。

12. 重新回到Git Bash窗口，执行如下命令，进入v3-calendar文件夹中。

cd v3-calendar

13. 执行如下命令，执行后如果显示图片中内容（App运行主机地址和网络地址）则合适。

npm run serve

注意：上述图片执行完“npm run serve”命令后如果出现报错，没有显示App运行主机地址和网络地址，首先仔细阅读错误原因，看是不是vue版本错误的问题。

如果是vue版本错误引发的问题，执行如下命令。@后面版本号按照错误提示更改即可。

npm install vue@3.2.13 --save

重新运行如下命令，显示App运行主机地址和网络地址即合适。

npm run serve

5  浏览器输入地址查看

打开浏览器，输入Git Bash窗口给出的地址“http://localhost:8080/”（注意看清端口号，确保输入正确）后按回车键，显示如图界面即可。

6  案例——简单修改v3-calendar中的内容

要求实现效果：

1. 在“C:\Users\Administrator”下找到v3-calendar文件夹，使用Visual Studio Code打开（简单方法：直接将v3-calendar文件夹拖拽至Visual Studio Code中），打开后如图所示。

2. 删除src/components下的HelloWorld.vue文件，删除src/views下的AboutView.vue（About.vue）和HomeView.vue（Home.vue）文件。

3. 在src/assets下增加三个文件夹，分别是css、img、js。

链接：https://pan.baidu.com/s/1lFcqja2pdUl8GYOSQ4-dOw?pwd=e6n9

提取码：e6n9

复制这段内容后打开百度网盘提取文件。

4. 如图，将上图这三个文件夹依次拖拽至src/assets下，删除src/assets下logo.png文件。

5. 在src/views下修改App.vue文件中的代码如下：

<template>
  <div id="nav">
    app
  </div>
  <router-view/>
</template>

<style lang="less">

</style>

6. 在src/router下修改index.js文件中的代码如下：

import { createRouter, createWebHistory } from 'vue-router'


const routes = [

]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

7  测试页面效果

1. 在“C:\Users\Administrator”下鼠标右击，重新打开Git Bash窗口，执行如下命令。

cd v3-calendar/

npm run serve

2. 显示上述地址，打开浏览器输入地址 http://localhost:8081/

访问（也可刷新前面刚开始的地址：http://localhost:8081/）。

访问后得到如图界面即案例完成。