之前说的都是vue的基础知识,学会这些基础知识之后,就要开始写一个真正的应用(网站/系统)了。
写项目,不是和以前写原生js项目那样自己建文件夹(html,css,js)。vue提供了专门写项目的文件夹,这个文件夹如何创建,就是现在要说的:
我们要通过vue的脚手架来生成一个项目文件夹,生成的这个文件夹里面内置了很多的资源包,这些包都是为了解决一些常见问题的(例如浏览器对代码兼容的处理等),整个项目文件夹很大(一百多MB),但是在上线的时候不会上传这些开发环境资源,而且还会做项目优化,最后上线的时候不到1MB。
创建一个vue的项目文件夹,首先在你的电脑上需要安装node,为什么要node:因为我们需要用到node里面内置的npm来下载很多东西。(node直接在浏览器搜索进官网 下载安装即可),打开cmd输入node -v 检查node版本,如果输出版本号,说明node安装完成。
在电脑上安装好node之后,安装vue脚手架:在任何地方打开cmd都可以,因为node和脚手架cli都是要全局安装的,所以在任何地方都可以(一般全局安装的东西只需要安装一次,后面创建项目的时候就不用再安装脚手架了,直接vue ui创建即可)输入 npm install -g vue-cli 回车安装脚手架,等待安装完成即可(这个要几分钟)
检查一下脚手架是否安装完成:输入 vue -v
脚手架安装完成以后,准备工作就做好了,现在就可以使用脚手架来创建vue项目文件夹了
创建方式有两种,一种是通过命令行的方式创建,另一种是通过可视化面板的方式创建,相比之下,可视化的面板创建比较简单,这里我们只介绍可视化创建的这种方式。
‘
在F盘新建一个文件夹(
最后创建好的vue项目就会在这个文件夹里),进入这个文件夹按住shift + 鼠标右键,在此处打开命令行cmd,然后输人
进入这个网页,点击输入你的项目名称—–点击创建—— 选择npm—-下一步
选择手动—–下一步
选择默认安装的配置项
- 选择babel —- router —- vuex —-使用配置文件(最后一个) 选择这4个即可,下一步
- 选择第四个(非严格模式)
最后点击创建项目
然后会弹出是否保存预设,点击否,不保存,然后等待它生成项目文件即可(得1分钟),此时, 在cmd里面是可以看到进度的,这个可视化面板和cmd是同步的。
暂无评论内容