WEB前端项目开发——(一)(2024)
WEB前端项目开发——(一)(2024)
本篇文章介绍通过了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/)。
访问后得到如图界面即案例完成。
- 点赞
- 收藏
- 关注作者
评论(0)