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的配置;

相关文章
|
2月前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
104 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
2月前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
176 2
|
2月前
|
JavaScript
Vue CLi脚手架创建第一个VUE项目
Vue CLi脚手架创建第一个VUE项目
37 3
|
1月前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
1月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
2月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
91 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
2月前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
21 7
|
1月前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
2月前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
37 6
|
1月前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。