带你玩转vue——前端工程搭建

简介: 带你玩转vue——前端工程搭建

在正式搭建项目之前我们首先要认识一下vue-cli:

vue-cli就是vue的脚手架,顾名思义就是它的上面可以搭载很多工具,当你需要其中一个工具对工程进行构建时只需要将它安装到脚手架上,然后使用命令调用它,而你并不需要知道他是怎么运行的,这样我们在项目构建中就可以更加得心应手,当有一天你的脚手架拆除的时候,展露出来的就是你精美的作品了!

需要注意的是vue-cli有两个相差比较大的版本,2.x和3.x,因为很多类库2.x不支持所以我们尽量安装3.x:

npm install -g @vue/cli

安装完成后我们需要用cmd命令验证一下是否安装成功:vue --version

image.png

如果出现3.x的版本号说明安装成功了,如果设备之前安装过2.x的版本,需要将之前的版本卸载掉在执行上面的语句,卸载命令:npm uninstall vue-cli -g。

接下来就要进入我们的正题了——搭建项目。vue项目搭建有两种方式,一种是在命令窗口中执行,另一种是运行一个ui页面,鉴于可读性和可操作性我们使用ui页面的教程搭建项目:

运行vue ui

image.png

自动弹出如下图的一个项目管理器页面:

image.png

点击创建,选择项目根路径:

image.png

选中项目后,点击正下方的:

image.png

接下来就是一些项目基本项的配置:

1、这里我们选用的包管理工具是npm

image.png

2、选择预设配置

image.png

这里的demo是我以前预设好的配置可以拿来直接用,这个配置基本上是不用动的,等一下大家可以把接下来的配置都做成预设,这样就不用了每次搭建工程都重新选择配置项了!所以这里我们选择手动!!

3、新建功能选择

image.png

其中:

①router是vue的路由,官方解释为:Vue路由器是Vue.js的官方路由器。它与Vue.js核心深度集成!

功能包括:

嵌套路线/视图映射

模块化,基于组件的路由器配置

路由参数,查询,通配符

查看由Vue提供的转换效果。js的转换系统

细粒度的导航控制

链接自动活动的CSS类

HTML5历史模式或散列模式,在IE9中具有自动回退功能

可定制的滚动行为

反正就是很重要啦!在我们的项目中也是必不可少的!!

②Vuex帮助我们处理共享状态

通俗的讲,vuex就是一个存放全局变量的容器,可以存放同步不同vue文件之间的状态,例如我们的web项目的登录功能,当你完成一次登录后需要将当前登录人的信息存放在项目中,这样方便在以后其他功能中随时可以调用,这时候就可以将登录人信息存放在vuex中,这样即使你离开了登录页面,也可以在其他页面中获取到登录人信息

③PostCSS为css预处理器,这个可以查看

4、配置选择

image.png

配置选择如上所示,点击创建项目会弹出下面弹窗

image.png

为你的配置填入一个预设名,下次创建项目就可以直接使用预设啦!!

然后就是耐心的等待了

image.png

这个过程vue会自动下载安装自己需要的工具,如果网速慢可能要多等一会。

当出现下面这个页面的时候,恭喜你你的第一个vue项目已经可以进入开发阶段啦~~

image.png

相关文章
|
2月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
2月前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
3月前
|
资源调度 JavaScript 前端开发
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
38 5
|
3月前
|
缓存 前端开发 JavaScript
前端的全栈之路Meteor篇(二):容器化开发环境下的meteor工程架构解析
本文详细介绍了使用Docker创建Meteor项目的准备工作与步骤,解析了容器化Meteor项目的目录结构,包括工程准备、环境配置、容器启动及项目架构分析。提供了最佳实践建议,适合初学者参考学习。项目代码已托管至GitCode,方便读者实践与交流。
|
3月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
2月前
|
JavaScript 前端开发 搜索推荐
Vue的数据驱动视图与其他前端框架的数据驱动方式有何不同?
总的来说,Vue 的数据驱动视图在诸多方面展现出独特的优势,其与其他前端框架的数据驱动方式的不同之处主要体现在绑定方式、性能表现、触发机制、组件化结合、灵活性、语法表达以及与后端数据交互等方面。这些差异使得 Vue 在前端开发领域具有独特的地位和价值。
|
2月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue:前端框架的巅峰对决与选择策略
|
3月前
|
前端开发 JavaScript API
2025年前端框架是该选vue还是react?有了大模型-例如通义灵码辅助编码,就不用纠结了!vue用的多选react,react用的多选vue
本文比较了Vue和React两大前端框架,从状态管理、数据流、依赖注入、组件管理等方面进行了详细对比。当前版本和下载量数据显示React更为流行,但Vue在国内用户量增长迅速。Vue 3通过组合式API提供了更灵活的状态管理和组件逻辑复用,适合中小型项目;React则更适合大型项目和复杂交互逻辑。文章还给出了选型建议,强调了多框架学习的重要性,认为技术问题已不再是选型的关键,熟悉各框架的最佳实践更为重要。
174 0
|
8天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
56 1
|
18天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。