Vue CLI是基于Vue.js进行快速发展的完整系统,提供了:
- 交互式的项目脚手架
- 实现零配件的原型开发
- 图形化的创建和管理项目的界面
基本框架的构建:
.
├── build/ # webpack 配置文件
│ └── ...
├── config/
│ ├── index.js # 项目核心配置
│ └── ...
├── src/
│ ├── main.js # 程序入口文件
│ ├── App.vue # 程序入口vue组件
│ ├── components/ # 组件
│ │ └── ...
│ └── assets/ # 模块资源 (会被webpack处理)
│ └── ...
├── static/ # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│ └── unit/ # 单元测试
│ │ ├── specs/ # 测试规范
│ │ ├── index.js # 测试入口文件
│ │ └── karma.conf.js # 测试运行配置文件
│ └── e2e/ # 端到端测试
│ │ ├── specs/ # 测试规范
│ │ ├── custom-assertions/ # 端到端测试自定义断言
│ │ ├── runner.js # 运行测试的脚本
│ │ └── nightwatch.conf.js # 运行测试的配置文件
├── .babelrc # babel 配置文件
├── .editorconfig # 编辑配置文件
├── .eslintrc.js # eslint 配置文件
├── index.html # index.html 入口模板文件
└── package.json # 运行的脚本与相关依赖
一般来说的话,我们在src下写代码,所以主要关注的还是src文件夹
index.html -> 项目的主页,和其他的html一样,但一般只定义一个空的根节点,在main.js里面定义的实例将挂载在根节点下,内容都通过vue组件填充。
main.js -> 入口文件,主要是引入vue框架、根组件及路由设置,并且定义vue实例
App.vue -> 根组件,分为三个模块,一般来说,配置路由引入其他的组件
router -> 路由配置,在路由下面有一个index.js的路由配置文件,负责路由的调用和配置
首先引入vue-router路由依赖(import Router from ‘vue-router’) 使用路由依赖(Vue.use(Router))
然后引入页面组件,import HelloWorld from ‘@/components/HelloWorld’
最后就是路由的配置了,主要就是配置组件的路径、名字、和组件的名称。一般来说所有的组件的路由都是在这里配置,包括子组件
HelloWorld.vue -> 页面组件,起初本页面是在components下的,但是建议还是将一般的页面组件放置在一个view的文件下(同时也是src的子文件)
个人理解:就是一个Vue的项目展开之后,首先就是进入入口文件main.js然后呢,加载index.html主页文件,之后就是App.vue组件了,创建了vue实例,然后呢就是vue的生命周期了。
关于Vue-CLI的学习目前就是这些了,到之后技术增长继续吧