如何创建一个Vue项目(Vue2脚手架的安装)

一 、前期准备

脚手架是什么?

我们创建vue项目,可以借助脚手架工具,脚手架是一套已经包含核心功能和标准文件夹结构的半成品项目,它具有标准化!而且极其便于协作,能够使我们降低学习成本,所有的vue项目几乎都是在脚手架的基础上开发的

初始化vue项目之前需要在你的电脑里安装一些vue的依赖

1.安装node.js ,

在百度搜索node.js,电脑需要安装node.js,需要下载长期维护版(稳定),按提示安装

① 安装完之后 检查是否安装成功,在cmd 命令行窗口输入 node -v 出现版本号说明安装成功 

2.安装vue-cli 

① 在cmd 命令行窗口输入 npm install --global vue-cli (vue-cli是创建脚手架的工具)

② 安装完成之后,输入 vue -V 查看版本号 出现版本号说明安装成功


二 、通过命令行创建vue项目

你可以在任意文件夹下通过cmd 命令行创建项目

首先创建一个test测试文件夹

然后在文件内的地址栏输入cmd 打开命令行

如图:

打开之后是这个样子的 

重点来了,通过命令创建自己的vue项目  在命令行输入    vue create my_app  (my_app是项目名称,自定义的,叫什么都行

输入命令之后会出现 我们选择第三个选项 > Manually select features 这个选项可以让我们自己选择安装哪些组件

之后会出现,这个是选择要在项目里安装哪些东西 , 我们可以选择  (上下键选择  空格确定

Choose Vue version 是选择vue版本

Router 路由 控制页面切换

Vuex 全局状态管理

 CSS Pre-processors css 预处理器

Progressive Web App (PWA) Support 这个可选可不选 (说的不对的地方 欢迎评论指教)

接着出现选择版本 我们选择2.x 这里我们发现 vue2 和vue3项目创建方法是一样  回车确定

这里的是问选择history模式的路由还是mode模式 ,可以看到选项里面大大的Y 直接敲回车默认Y

这里是选择哪一种css预处理器,sass和less都差不多 没有用过css 预处理器的可以去搜一下 ,它可以帮助我们css结构更加清晰,便于维护

这里直接回车看下一个选项

这里是选择我们项目的依赖信息存放到哪一个文件

我们当然选择 package.json 把所有的依赖信息都存放在一个文件中 然后回车

这里大概的意思是 是否把我们这次创建项目的配置保存起来,如果保存起来,下次新建项目的时候就会看到这个记录,不用再重新配置

官方选择项里有个大大的N,所以我们当然是直接敲回车  (你也可以保存起来

让它跑一会

最后是这个样子的

打开刚才的测试文件夹,会发现我们刚刚创建好的项目

用代码编辑器打开这个项目,接着用鼠标右键点击src文件夹 选择集成终端中打开 在命令行输入npm run serve 敲回车

 项目启动之后

 最后就可以看到我们项目的初始页面


以上是创建vue项目的全部内容,如有遗漏的,欢迎评论补充,

 这个二维码是一个前端交流群,欢迎进群讨论前端技术

  • 9
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值