项目01——vue 脚手架创建项目文件夹

项目01——vue 脚手架创建项目文件夹-智码星河
项目01——vue 脚手架创建项目文件夹
此内容为免费阅读,请登录后查看
0
限时特惠
免费阅读

之前说的都是vue的基础知识,学会这些基础知识之后,就要开始写一个真正的应用(网站/系统)了。

写项目,不是和以前写原生js项目那样自己建文件夹(html,css,js)。vue提供了专门写项目的文件夹,这个文件夹如何创建,就是现在要说的:
我们要通过vue的脚手架来生成一个项目文件夹,生成的这个文件夹里面内置了很多的资源包,这些包都是为了解决一些常见问题的(例如浏览器对代码兼容的处理等),整个项目文件夹很大(一百多MB),但是在上线的时候不会上传这些开发环境资源,而且还会做项目优化,最后上线的时候不到1MB。

创建一个vue的项目文件夹,首先在你的电脑上需要安装node,为什么要node:因为我们需要用到node里面内置的npm来下载很多东西。(node直接在浏览器搜索进官网 下载安装即可),打开cmd输入node -v 检查node版本,如果输出版本号,说明node安装完成。

图片[1]-项目01——vue 脚手架创建项目文件夹-智码星河

在电脑上安装好node之后,安装vue脚手架:在任何地方打开cmd都可以,因为node和脚手架cli都是要全局安装的,所以在任何地方都可以(一般全局安装的东西只需要安装一次,后面创建项目的时候就不用再安装脚手架了,直接vue ui创建即可)输入 npm install -g vue-cli 回车安装脚手架,等待安装完成即可(这个要几分钟)

图片[2]-项目01——vue 脚手架创建项目文件夹-智码星河

检查一下脚手架是否安装完成:输入 vue -v

图片[3]-项目01——vue 脚手架创建项目文件夹-智码星河

脚手架安装完成以后,准备工作就做好了,现在就可以使用脚手架来创建vue项目文件夹了
创建方式有两种,一种是通过命令行的方式创建,另一种是通过可视化面板的方式创建,相比之下,可视化的面板创建比较简单,这里我们只介绍可视化创建的这种方式。

在F盘新建一个文件夹(

最后创建好的vue项目就会在这个文件夹里),进入这个文件夹按住shift + 鼠标右键,在此处打开命令行cmd,然后输人 vue ui 回车 等待一会就会在浏览器打开一个网页。

图片[4]-项目01——vue 脚手架创建项目文件夹-智码星河
图片[5]-项目01——vue 脚手架创建项目文件夹-智码星河

进入这个网页,点击输入你的项目名称—–点击创建—— 选择npm—-下一步

图片[6]-项目01——vue 脚手架创建项目文件夹-智码星河

选择手动—–下一步

图片[7]-项目01——vue 脚手架创建项目文件夹-智码星河

选择默认安装的配置项

  1. 选择babel —- router —- vuex  —-使用配置文件(最后一个) 选择这4个即可,下一步
  2. 选择第四个(非严格模式)
图片[8]-项目01——vue 脚手架创建项目文件夹-智码星河

最后点击创建项目

然后会弹出是否保存预设,点击否,不保存,然后等待它生成项目文件即可(得1分钟),此时, 在cmd里面是可以看到进度的,这个可视化面板和cmd是同步的。

图片[9]-项目01——vue 脚手架创建项目文件夹-智码星河

完了之后,把创建好的文件夹拖到编辑器打开即可,至此,vue脚手架创建项目文件夹已经完成了。

本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
文章版权声明 1 本网站名称: 智码星河
2 本站永久网址:https://wx234.cn
© 版权声明 文章版权归作者所有,未经允许请勿转载。

WX234.CN
喜欢就支持一下吧
点赞15赞赏 分享打赏
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称表情代码图片

    暂无评论内容