脚手架vue-cli系列一：安装与规范
|
我很喜欢Vue的一个重要原因就是因为它的vue-cli，这个工具可以让一个简单的命令行工具来帮助我快速地构建一个足以支撑实际项目开发的Vue环境，并不像Angular和React那样要在Yoman上找适合自己的第三方脚手架。vue-cli的存在将项目环境的初始化工作与复杂度降到了最低。 1.安装 安装vue-cli vue-cli是一个npm的安装包，我们希望它能在本机的任意目录下创建项目，那么就得将它安装到node.js的全局运行目录下 $ npm i vue-cli -g 安装成功后，我们就可以使用vue-cli来初始化Vue项目了。 使用vue-cli初始化项目 vue-cli是一个很简单的指令，先打开它的帮助文件看看它的具体用法： 用法: vue <命令> [选项]
命令:
init 从指定模板中生成一个新的项目
list 列出所有的可用的官方模板
help [cmd] 显示所有[cmd]（命令）的帮助
选项:
-h,--help 输出用法信息
-V,--version 输出版本号
创建项目 接下来先看看这个vue-cli如何为我们创建项目。创建项目使用的是init命令，它会为我们自动创建一个新的文件夹，并将所需的文件、目录、配置和依赖都准备好，具体做法如下： $ vue init webpack my-project init命令执行后会出一系列的交互式问题让我们选择，运行结果如下所示。 完成以后直接按提示进入项目，安装npm的依赖包后就可以开始开发。
2.规范 目录的结构与文件的组织应在开发前就进行约定，对于多人协作式项目，目录的使用与文件的命名都显得尤为重要。 具体约定如下： （1）公共组件、指令、过滤器（多于三个文件以上的引用）将分别存放于src目录下的 ● components； ● directives； ● filters。 （2）以使用场景命名Vue的页面文件。 （3）当页面文件具有私有组件、指令和过滤器时，则建立一个与页面同名的目录，页面文件更名为index.vue，将页面与相关的依赖文件放在一起。 （4）目录由全小写的名词、动名词或分词命名，由两个以上的词组成，以“-”进行分隔。 （5）Vue文件统一以大驼峰命名法命名，仅入口文件index.vue采用小写。 （6）测试文件一律以测试目标文件名.spec.js命名。 （7）资源文件一律以小写字符命名，由两个以上的词组成，以“-”进行分隔。 例如： src
├── README.md
├── assets // 全局资源目录
│ ├── images // 图片
│ ├── less // less 样式表
│ ├── css // CSS 样式表
│ └── fonts // 自定义字体文件
├── components // 公共组件目录
│ ├── ImageInput.vue
│ ├── Slider.vue
│ └── ...
├── directives.js // 公共指令
├── filters.js // 公共过滤器
├── login // 场景：登录
│ ├── index.vue // 入口文件
│ ├── LoginForm.vue // 登录场景私有表单组件
│ └── SocialLogin.vue
├── cart
│ ├── index.vue
│ ├── ItemList.vue
│ └── CheckoutForm.vue
├── Discover.vue // 场景入口文件
├── App.vue // 默认程序入口
└── main.js
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
