【vue2第八章】工程化开发和使用脚手架和文件结构

Myth丶恋晨 2023-10-15 14:24 14阅读 0赞

#### vue工程化开发 & 使用脚手架VUE CLI： ####

1，核心包传统开发模式：基于js/html/css直接引入核心包开发vue。  
2，工程化开发。基于构建工具如(webpack)的环境中开发vue。

#### vue cli是什么： ####

vue cli是一个vue官方提供的一个全局的命令工具.  
可以帮助我们快速的创建一个开发vue项目的标准化基础架子【集成了webpack配置】

**好处** ：

1.  开箱即用，0配置。
2.  内置babel等工具.
3.  标准化.

**使用步骤**：

1.  全局安装(一次)：`yarn global add @vue/cli` 或者使用npm `npmi @vue/cli -g`
2.  查看vue的版本: `vue --version`
3.  创建项目的架子：`vue create project-name` (项目名-不能用中文)
4.  启动项目: `varn serve`或 `npm run serve` (找package.json）

![在这里插入图片描述][cdd79b84e94c4d46bd7b4aa4fcfd38b7.png_pic_center]  
1.使用vscode打开需要创建项目的文件夹。或者打开指定文件夹，在打开命令窗口。  
使用`vue create project-name`创建demo项目。  
![在这里插入图片描述][e156b262cbed4e329203b4147a473200.png_pic_center]  
要使用vue3就可以选择创建vue3项目，我这里选的vue2.  
然后这里需要等待一段时间。  
![在这里插入图片描述][d6551cebbe93447fac2e5431b1852110.png_pic_center]

然后cd到项目文件中。`cd demo` 使用 `npm run serve` 启动项目。  
启动成功按住ctrl点击链接。  
![在这里插入图片描述][ce7583630daf4522b1608cb5ef09982b.png_pic_center]

这样一个项目的基础框架就搭建成功。

这里启动项目时为什么命令时 `npm run serve`  
这个启动名称实在 package.json里面配置的。

![在这里插入图片描述][00de5c7b2b7f450a9fe73a6a2d4cbd89.png_pic_center]  
可以将这里面的serve改为其他的单词字母，然后使用 `npm run 改过之后的单词`也可以成功把项目运行起来。

***项目的文件结构的各个用途：***  
使用npm安装的vue是没有yarn.lock文件  
![在这里插入图片描述][acbae762d4d540cb8b4ae78afdc1aa17.png_pic_center]  
***项目运行流程***：  
![在这里插入图片描述][a45ef28855fb4f86946bd2f3b45266de.png_pic_center]

[cdd79b84e94c4d46bd7b4aa4fcfd38b7.png_pic_center]: https://img-blog.csdnimg.cn/cdd79b84e94c4d46bd7b4aa4fcfd38b7.png#pic_center
[e156b262cbed4e329203b4147a473200.png_pic_center]: https://img-blog.csdnimg.cn/e156b262cbed4e329203b4147a473200.png#pic_center
[d6551cebbe93447fac2e5431b1852110.png_pic_center]: https://img-blog.csdnimg.cn/d6551cebbe93447fac2e5431b1852110.png#pic_center
[ce7583630daf4522b1608cb5ef09982b.png_pic_center]: https://img-blog.csdnimg.cn/ce7583630daf4522b1608cb5ef09982b.png#pic_center
[00de5c7b2b7f450a9fe73a6a2d4cbd89.png_pic_center]: https://img-blog.csdnimg.cn/00de5c7b2b7f450a9fe73a6a2d4cbd89.png#pic_center
[acbae762d4d540cb8b4ae78afdc1aa17.png_pic_center]: https://img-blog.csdnimg.cn/acbae762d4d540cb8b4ae78afdc1aa17.png#pic_center
[a45ef28855fb4f86946bd2f3b45266de.png_pic_center]: https://img-blog.csdnimg.cn/a45ef28855fb4f86946bd2f3b45266de.png#pic_center