zoukankan      html  css  js  c++  java
  • 关于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的学习目前就是这些了,到之后技术增长继续吧

  • 相关阅读:
    HDU 5642 King's Order 动态规划
    HDU 5640 King's Cake GCD
    HDU 5641 King's Phone 模拟
    HDU 5299 Circles Game 博弈论 暴力
    HDU 5294 Tricks Device 网络流 最短路
    HDU 5289 Assignment rmq
    HDU 5288 OO’s Sequence 水题
    星际争霸 虚空之遗 人族5BB 操作流程
    Codeforces Beta Round #3 D. Least Cost Bracket Sequence 优先队列
    Codeforces Beta Round #3 C. Tic-tac-toe 模拟题
  • 原文地址:https://www.cnblogs.com/Indomite/p/13258573.html
Copyright © 2011-2022 走看看