vue-cli脚手架 搭建项目

前端的工程化开发，搭建vue开发环境 一般会选用基于webpack的脚手架工具进行项目构建。
要求node.js版本是8以上的

0 检测node版本
node -v

1 全局安装
npm install -g @vue/cli 安装全局脚手架
或者
yarn global add @vue/cli

2 检测安装的vue-cli的版本 4.2.3
vue -V

3 脚手架创建项目
vue create 项目名称
在创建的项目终端中打开-- 指令 vue create 项目名
回车 --yes/no -->y/n
键盘的方向键 下键 加 回车
方向上下 加空格 就是选中终端中的文件 （试试就知道了）

如果不让默认就按下键 。就会生成下边的样式
然后需要哪个 键盘下键+空格键 ，就是确认。
画箭头的也重要，只是目前不需要 。

当选中所需 完成之后 ，直接回车
聚会出现 询问你是否使用hisTory的路由模式 这个额一般是生产开发阶段用的 ，需要后台服务器的支撑。可以选择yes或者no

如果是 n之后

上边这个sass都可以用 ，一般用最新版的第一个。如果后续有冲突在重新安装 node sass就可以了。

下边可以选择默认 回车就可以了

这个需要注意

当选择y的时候是一个预设
假设给有一个预设名，用的时候是直接 vue created 预设名
这里我设置了n之后就会提示选择通过哪种方式安装，是yarn 或者npm

这的选择根据你安装的是npm还是yarn 两个如果都有安装，都可以随便选中一个安装 注意的是，指令不一样， npm

当我们安装成功之后 就会在我们创建的项目目录下生成以下

运行到这里 ，我们要注意 这个地方的yarn serve
是根据你当时创建的 vue create 项目名称 来执行的。需要的话就 cd 项目名称
然后 指令 yarn serve就启动就可以了
(如果是num的话 一定要是 npm run serve
npm的话 是执行npm run serve )

我们yarn serve 成中之后

会给两个访问地址 ，随便选

就可以访问了

剩下就是我们的操作了


也就是说你在App.vue里操作什么，我们的index文件就会对应什么 ，那么页面渲染就生成什么。也就是热加载 不需要我们手动刷新。

之所以会解析以vue为后缀的文件，是因为vue-loader 支持。

以vue为后缀名的组件就是单文件组件