当前位置: 首页>前端>正文

nest项目目录结构 c项目目录结构

使用Vue CLI3创建项目:

脚手架(scaffold) 指施工现场为工人操作并解决垂直和水平运输而搭设的各种支架。建筑界的通用术语。

nest项目目录结构 c项目目录结构,nest项目目录结构 c项目目录结构_nest项目目录结构,第1张

写在前面:

- 如果你只是简单的写几个Vue的**Demo**程序,那你不需要Vue CLI。
 - 如果你**开发大型项目**,那你需要,而且**必须**使用Vue CLI。
 - 开发大型项目时,必须考虑代码目录结构、项目机构和部署、热加载、代码单元测试等事情。
 - 如果每个项目都要手动完成这些工作,工作效率低下,所以要使用脚手架来帮助我们完成这些事情。

CLI是什么意思?

CLI:Command-Line-Interface,翻译为命令行界面,俗称脚手架。
使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。

CLI使用前提–Node

1:安装NodeJS:你可以在官方网站中直接下载安装:http://nodejs.cn/download/
2:检测安装的版本:
  -默认自动安装Node和NPM(Node Package Manager,是一个NodeJS包管理和分发工具,经常使用NPM来安装一些开发过程中的依赖)
  -Node环境要求8.9以上或者更高版本
  -使用 node -v  npm -v 来检查版本
提示:

nest项目目录结构 c项目目录结构,nest项目目录结构 c项目目录结构_vue_02,第2张

脚手架Vue CLI的使用安装

1:npm install -g @vue/cli  	   //-g 全局安装
2:vue init webpack my-project     //Vue CLI2初始化项目
3:vue create my-project           //Vue CLI3初始化项目 (**2/3根据需要选择**)
//提示:如果使用CLI版本过低,则需要卸载重新安装,代码如下
4:npm uninstall -g vue-cli       //卸载
5:npm install -g @vue/cli        //安装最新版本

以下演示使用Vue CLI3

vue create “文件名”

nest项目目录结构 c项目目录结构,nest项目目录结构 c项目目录结构_nest项目目录结构_03,第3张

相关配置选项的选择以及含义(空格选中/反选):

nest项目目录结构 c项目目录结构,nest项目目录结构 c项目目录结构_npm_04,第4张

nest项目目录结构 c项目目录结构,nest项目目录结构 c项目目录结构_vue_05,第5张

nest项目目录结构 c项目目录结构,nest项目目录结构 c项目目录结构_配置文件_06,第6张

继续回车就会进行脚手架cli3的创建,创建成功如下,按照提示运行命令启动程序:

nest项目目录结构 c项目目录结构,nest项目目录结构 c项目目录结构_npm_07,第7张

运行将项目启动:成功启动界面如下:

nest项目目录结构 c项目目录结构,nest项目目录结构 c项目目录结构_配置文件_08,第8张

点击链接:

nest项目目录结构 c项目目录结构,nest项目目录结构 c项目目录结构_nest项目目录结构_09,第9张

至此:恭喜你已经成功的创建了一个基于脚手架cli3的项目,可以开始你的开发!

通过编译器打开刚才配置好的项目,目录结构如下:

可以看到脚手架cli3的目录结构相比较cli2很大的简洁了,原因是一些配置不希望你看到,进行了相应的隐藏

nest项目目录结构 c项目目录结构,nest项目目录结构 c项目目录结构_Vue_10,第10张

好奇:和vue cli2相比那些配置文件到底去了哪里?如果想要更改要去哪里进行?
Vue cli3的优点以及与cli2的区别:
	1:vue-cli3的设计原则是“0配置”,移除了配置文件根目录下的一些配置文件:build、config等
	2:vue-cli3提供了 vue ui 命令,提供了可视化配置,更加人性化
	3:移除了static文件夹,新增了public文件夹,并且将index.html移动到public中。

nest项目目录结构 c项目目录结构,nest项目目录结构 c项目目录结构_vue_11,第11张

关于使用 vue ui启动配置服务器进行cli3的配置情况请见下一篇总结!感谢观看!



https://www.xamrdz.com/web/2md1960222.html

相关文章: