关于Vue-CLI的那些事儿

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的学习目前就是这些了,到之后技术增长继续吧

原文地址:https://www.cnblogs.com/Indomite/p/13258573.html