Vue开发实战01-创建基础项目,包管理使用yarn

简介: Vue开发实战01-创建基础项目,包管理使用yarn

开发实战系列01

1、vue.js介绍:

vue是一个用于创建用户界面的开源渐进式JavaScript框架,是目前市面上比较流行的前端框架之一。vue的开发者是中国人,在国内项目中使用的地方比较多。对于一个大前端来说,几乎是必学的东西;

2、vue版本:

目前在用的版本主要是Vue2,但vue最新的版本是Vue3。可以根据情况选择版本;建议选择Vue 3;

3、安装Vue 3:

Vue的安装方式有多种,最常用的是npm安装和CLI方式安装;

npm是包管理工具;使用npm需要安装Node.js; Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎。是一个JavaScript运行时环境;Node.js让前端开发也能进行后端的开发;官网地址是:https://nodejs.org/zh-cn/;关于Node.js的详细介绍请参考官网;

安装完Node.js后,打开命令行窗口,执行 npm install vue@next 命令安装vue;

CLI安装方式:CLI是command-line interface的缩写,意思是命令行界面;Vue 提供了一个官方的CLI;

前提也是需要安装node.sj; 在命令行界面执行命令: npm install -g @vue/cli;CLI是一个全局安装的 npm 包,提供了命令vue,用于创建vue项目;通过简单运行 vue,来验证它是否安装成功;

4、另一个包管理工具:

   包管理工具除了npm,还有一个yarn,比npm使用更合适;yarn是Facebook的产品。相比npm,yarn更强大,更好用。团队开发中的使用的某些包名版本不一致,yarn会根据本地的package中,自动下载各自的版本包,如果使用npm,包版本不一致就可能会报错。所以推荐使用yarn;

5、创建一个vue项目;

第一步:安装node.js环境,配置环境变量;打开命令行窗口,执行命令npm,验证是否安装成功;

第二步:安装yarn,执行yarn install 或直接在命令行窗口输入yarn; 安装完成后执行命令yarn 验证;

第三步:创建vue项目:推荐使用工具VSCode;

打开VSCode,在终端执行命令vue create foldername; 选择vue3版本,则当前文件夹下会创建一个你命名的文件夹和基础的代码;

第四步:启动项目;进入新创建的文件夹内,执行命令yarn serve就可以启动项目;

项目开发部署测试是,需要执行打包命令:yarn build,生成的文件可用于测试部署;

以上是创建一个vue基础项目的基本操作,后续介绍一下路由router和axios的配置;

相关文章
|
人工智能 自然语言处理 JavaScript
通义灵码2.5实战评测:Vue.js贪吃蛇游戏一键生成
通义灵码基于自然语言需求,快速生成完整Vue组件。例如,用Vue 2和JavaScript实现贪吃蛇游戏:包含键盘控制、得分系统、游戏结束判定与Canvas动态渲染。AI生成的代码符合规范,支持响应式数据与事件监听,还能进阶优化(如增加启停按钮、速度随分数提升)。传统需1小时的工作量,使用通义灵码仅10分钟完成,大幅提升开发效率。操作简单:安装插件、输入需求、运行项目即可实现功能。
696 4
 通义灵码2.5实战评测:Vue.js贪吃蛇游戏一键生成
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
809 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
1223 2
|
JavaScript API 容器
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
1300 17
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
605 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
783 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
718 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
1070 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
632 0
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。