06｜框架搭建：如何用vue-cli搭建一个前端框架？
为什么我们要选择前后端分离？
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
本文详细介绍了使用vue-cli搭建前端框架的步骤和实践。首先讨论了前后端分离的开发模式的优势，然后介绍了搭建前端框架的准备工作，包括Node.js和NPM的安装，以及vue-cli的全局安装。作者详细介绍了使用Webpack构建项目的步骤，并提供了相关操作命令。通过实操方式指导读者如何快速搭建一个前端框架，为读者提供了清晰的操作步骤和相关技术知识。文章还包括了对页面的编辑实践和小结，强调了前端框架搭建的重要性和实用性。整体而言，本文内容丰富，适合前端开发人员快速了解和掌握相关技术。
《Python 实战 · 从 0 到 1 搭建直播视频平台》，新⼈⾸单¥59
全部留言(10)
- 最新
- 精选
- 不再是入门水平python的小宇1. 动态效果： 当用户将鼠标悬停在 Icon 上时，可以加入一些微动效来增加互动性。例如，Icon 可以轻微放大、旋转或改变颜色。 2. 提示功能： 当用户悬停在 Icon 上时，可以显示一个小提示（例如，“点击返回首页”），指导用户进行操作。 3. 适应性设计： 根据不同的页面背景，Icon 可以有多种颜色或版本。例如，对于深色背景的页面，可以使用白色版本的 Icon，而对于浅色背景的页面，则使用深色版本。 4. 响应式位置： 在不同的设备和屏幕大小上，Icon 的位置可以稍作调整，确保用户在任何情况下都能轻松访问。 5. 集成其他功能： Icon 除了返回首页功能外，也可以通过长按或右键点击来展示一个小菜单，提供其他常用功能，如“帮助”、“设置”或“关于我们”。 6. 与其他元素的协调： 确保 Icon 与页面上的其他元素在视觉上和功能上都能很好地协调。例如，如果页面上有一个导航栏，那么 Icon 应该与它在视觉风格和位置上都保持一致。 7. 历史版本展示： 在特定的时间，如品牌周年庆，可以展示平台 Icon 的历史版本，增加品牌故事感和用户的参与感。 8. 节日主题： 在特定的节日或活动期间，可以对 Icon 进行轻微的修改，增加节日氛围。例如，国庆节期间可以在 Icon 上添加国旗元素。 9. 加载动画： 如果平台的某些页面需要加载时间，可以使用 Icon 作为加载动画的一部分，增强用户的等待体验。 10. 错误页面的导航： 在“404”或其他错误页面上，Icon 可以作为一个明确的导航元素，帮助用户快速返回首页或其他关键页面。
作者回复: 写的非常全面和详细，为你点赞，继续加油！！
2023-08-27归属地：上海 
浩荡如空气为什么不用最新的vue3作者回复: 同学你好，课程整体实现上核心是通过项目实战来提升大家对Python全栈的应用能力，前端框架上的选择，对于初学者，选择Vue2可能会更容易上手。因为Vue2的文档和社区支持更加成熟，对于初学者来说更容易找到相关的学习资源和帮助。也是培养大家对于前端框架应用的能力，掌握了2的版本之后，对于3版本的应用也不会无从下手，是出于这样的考虑，感谢理解。
2023-08-20归属地：广东
浩仔是程序员对于思考题，可以把这部分抽象成一个公共组件，以达到复用的效果！ 1. 环境的安装，vue2.0和vue3.0有什么区别呢 vue2.0 npm install vue-cli vue3.0 npm install @vue/cli 区别在于多了@，@可以指定具体的版本 2. macos系统使用npm安装的时候会出现没有权限报错 直接使用sudo就可以 3. 在npm install也会报错 实测mac前面加sudo即可，如果是m系列处理器需要npm install --ignore-scripts作者回复: 你的解决方案非常正确，公共组件是非常不错的选择，感谢你的知识分享，我们一起加油。
2023-06-17归属地：广东
coderHOW1. 思考题 可以创建一个公共组件的文件夹，专门放置要多处复用的组件，哪里需要就直接引入 2. 安装时候出现的一些坑的总结 直接用 npm install -g @vue/cli 好像目前是安装的是 Vue CLI 4.x 的版本 根据文档如果想拉取2.x版本的，需要再安装一个桥接： npm install -g @vue/cli-init 再执行 vue init webpack my-project 环境变量配置后出现 npm ERR 报错 可以" 进入 C 盘 - 用户 - 删除 .npmrc 文件 "作者回复: 思考题的解决方案非常正确，感谢你的分享。也非常开心你能把过程自己实践遇到的问题分享出来，希望你在学习之后收获满满，我们一起加油。
2023-06-04归属地：广东2
Archer
如果使用flask前后端不分离的话，可以用父子模板的方法，构建一个父模板里面是公共显示部分比如导航栏之类的，然后在子模板继承父模板再做独立的页面开发。不知道VUE是不是类似的方法。作者回复: 这个有一些区别，前后端分离之后，Flask就是负责后端接口开发，从而实现前端的功能操作。而Vue有自己的语法和模版语法，但是对于前端开发部分核心的还是HTML、JavaScript、CSS这个也是一个相同的地方。
2023-05-14归属地：湖南- Geek_840593还有一个问题： 我没有http://localhost:8080/#/ ，我访问本地url只显示http://localhost:8080
作者回复: 你直接看在输入启动命令之后，终端控制台的地址就可以了，不是必须要带#，你可以尝试访问几个页面，就可以看到URL的变化。
2023-05-12归属地：重庆 - Geek_840593请问我们这次的项目用的是Vue CLI 3.x版本还是Vue CLI 2.x版本呀？ 就前面安装脚手架来看，2.x和3.x就不一样，比如vue init 命令已经被移除了，取而代之的是 vue create 命令，在 Vue CLI 3.x 版本中，dev 脚本已经被替换成了 serve 脚本，安装过程好痛苦
作者回复: 平台用的是 2.9.6的版本，3.x和2.x得确有一些区别，相关安装命令，我给你写在下面，有助于你完成安装。继续加油，有问题我们及时沟通。 2.x版本：npm install vue-cli -g vue init webpack xxx cd xxx npm install npm run dev
2023-05-12归属地：重庆 
贾维斯Echo有几种不同的方式可以实现在每个页面上显示平台 icon 并让其链接回首页： 1.固定在网站的导航栏或工具栏上，这样无论用户在浏览哪个页面，都可以方便地访问首页。这个导航栏可以是网站的主要导航栏或者一个专门的工具栏，它可以包含其他有用的链接或功能。 2.将平台 icon 放在每个页面的页脚或页眉，这样用户在浏览页面的底部或顶部时，也可以轻松访问首页。 3.也可以将平台 icon 放在页面的固定位置，例如左上角或右上角。这样，当用户滚动页面时，icon 会保持在视图中,用户需要返回的时候就回去了。作者回复: 非常不错的解决方案，通过各种灵活的方式来实现，非常的优秀，你可以尝试一下具体的实现方法，也欢迎你可以给更多的同学分享，继续加油。
2023-05-08归属地：上海
peterQ1：安装的vue-cli只对项目有效吗？ 比如在项目study1这个目录下面执行vue-cli的安装命令，那么，安装后的vue-cli对其他项目有效吗？ Q2：在一个目录下面执行vue-cli的安装命令，安装成功后，该目录下面并没有文件，还是空目录。难道vue-cli没有安装在此目录下面吗？ Q3：执行npm install失败，后面执行npm run dev也失败 Step1: 执行命令：npm install --global vue-cli，成功 Step2：执行：vue –V，成功，（刚开始有错误，搜索后解决） Step3: 执行：vue init webpack my-project2，成功（vue init webpack my-project2） Step4：执行：npm install, 失败 npm WARN saveError ENOENT: no such file or directory, open 'E:\Javaweb\study\videolive\front\study2\package.json' npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN enoent ENOENT: no such file or directory, open 'E:\Javaweb\study\videolive\front\study2\package.json' npm WARN study2 No description npm WARN study2 No repository field. npm WARN study2 No README data npm WARN study2 No license field. 但项目根目录下面有两个文件：package.json和package-lock.json。 后面执行npm install的错误信息： npm run dev npm ERR! code ENOENT npm ERR! syscall open npm ERR! path E:\Javaweb\study\videolive\front\study2\package.json 注：1 VSCode版本：1.65；2 node版本是v14.18.1，对应的NPM版本是 6.14.15；3 没有创建环境变量NODE_PATH，也没有在环境变量path追加%NODE_PATH%。作者回复: 1、vue-cli是一个脚手架，可以实现快速搭建Vue框架，并且可以通用，你可以用它来做各种项目的开发，相当于骨架搭建起来，最后内容填充由你来决定。 2、这个应该是文件路径的问题，如果安装成功之后一定会有对应的文件的，这个需要你再检查一下，一定在项目的根目录下执行命令。 3、对于运行不成功的问题，是文件路径问题，找不到对应文件，你这些命令执行一定在你创建的文件的根目录下执行。你现在的包位于E:\Javaweb\study\videolive\front\study2目录下，可以将包保存在E:\Javaweb\study\videolive\front目录下的子目录中，例如E:\Javaweb\study\videolive\front\study2\package.json。这样可以确保npm在保存包时不会因为找不到文件而报错。下面的问题也是一样的问题，我建议你重新创建一个新的项目文件，然后在该目录下执行，不能直接在cmd或终端里面去执行。
2023-05-06归属地：北京2
安静点我觉得可以讲Icon固定在左上角，或者固定在导航栏或菜单栏上，再或者以浮动按钮的形式展现 点击跳转首页这个需要绑定函数之类的吧。作者回复: 你的想法非常不错，Icon的处理可以把它放在公共组件内，例如Layout组件中header内，这样就可以实现每一个页面都可以展示，另外点击跳转，就是利用路由跳转的钩子函数就可以。
2023-05-05归属地：广东