一、什么是脚手架?
脚手架:可以理解为自动帮我们构建项目的工具。
二、安装脚手架
安装脚手架之前要下载node.js !!!!
1.基于node环境
查看node版本:node -V ------ 会出现电脑所下载的node.js 的版本号
查看npm版本:npm -V -------会出现npm的版本号信息
2.全局下 安装vue-cli脚手架
npm i -g @vue/cli 下载vue-cli脚手架
npm uninstall -g @vue/cli 卸载脚手架
3.创建脚手架项目
首先找到要创建项目的文件夹,在这里的文件夹里进入cmd然后执行下面的命令
vue create myvue 这里的myvue是项目的名称,不必须是myvue这个名字。
然后会出现一个页面选择第三个 Manually select features 通过键盘的上下按键选择。
之后选择babel router vuex,空格选中,这里也是通过上下按键控制 选中完成后 按enter键确定。
会再出现一个新的页面,我所用到的是2.x。
然后再通过过键盘输入 n。
然后选择第一个选项。
最后再输入 n 脚手架就完成创建了。
4.运行
运行是最简单的了,因为在以上步骤不出错的情况下完成后会出现下面两条命令
$ cd myvue
$ npm run serve
当然这里的$符号在用的时候是不需要的
我们只需要先输入 cd myvue 也就是进入我们所创建的脚手架(项目文件),一定要先进入项目文件夹后,再去执行下面的命令
npm run serve 简单来说这句话的意思就是开始脚手架的服务
然后会出现一个页面 ,页面中有两个地址 都是本地地址 location***+端口号 另一个是所用电脑的ip地址+端口号
通过以上步骤准确的执行,我们的脚手架就创建完成了。
在使用的过程中我们不要关闭有地址的这个cmd 这个页面在我们开发的过程中会提示错,并且关闭这窗口,就关闭了脚手架的服务
当我们关闭这个窗口的时候,我们只需要找到我们项目文件的所在文件,可以直接点进myvue这个文件夹后 在上方搜索栏直接输入cmd 进入 直接输入 npm run serve,就可以启动服务
三、目录介绍
当我们打开脚手架时,我们可以看到这里有很多的文件夹,以及文件
这里不禁有些困惑,我们应该在那里写代码呢,我的图片什么的放在那里呢?
这些文件夹都是用来干什么的呢?
下面就来告诉你这些文件 是用来干什么的
当我们点开文件夹可以发现,在assets中并没有css imgs 目录啊 ,这里是需要我们自己创建的
总结
提示:这里对文章进行总结:
本篇文章主要讲述了怎么去安装脚手架以及介绍了,我们创建的项目各个文件夹都是来存储什么文件的