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
解锁Vuex高级玩法:模块化与插件共舞,让你的Vue项目状态管理如虎添翼!
【8月更文挑战第27天】Vuex是一款专为Vue.js应用程序设计的状态管理模式及库,它通过集中管理组件状态来确保状态变更的可预测性。在大型应用中,采用模块化管理可以让代码结构更加清晰,同时利用插件增强功能。模块化管理允许将store拆分为包含各自state、mutations、actions和getters的独立模块。插件则能监听状态变化,实现诸如日志记录或数据持久化等功能。本文通过具体示例介绍了如何在Vuex中实现模块化管理和插件的高级应用。
37 1
|
24天前
|
前端开发
vue3+ts项目中使用mockjs
vue3+ts项目中使用mockjs
247 58
|
7天前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
vue项目中使用vue-router进行路由配置及嵌套多级路由
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
12 4
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【51.路由懒加载】
vue尚品汇商城项目-day07【51.路由懒加载】
13 4
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
10 2
|
4天前
|
API UED
如何实现Vue2项目升级Vue3?
如何实现Vue2项目升级Vue3?
12 1
|
7天前
|
JavaScript
vue项目中引入阿里图标iconfont
该文章指导如何在Vue项目中引入并使用阿里图标库Iconfont,包括图标的选取、下载配置文件及在项目中引入和使用图标的具体步骤。
|
16天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
20天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
下一篇
无影云桌面