zoukankan      html  css  js  c++  java
  • vue-cli#2.0项目结构分析

    项目结构

    build

    构建工具相关的目录

    config

    配置目录

    dist

    通过工具打包生成的最终需要上线的目录

    node_modules

    存放本地开发所有的依赖包的目录

    src

    源码目录

    static

    存放图片等静态资源的目录

    .babelrc

    babel是把新的ES语法,编译成浏览器兼容的语法的编译器,而它需要配置文件.babelrc来配置预设的规范

    .editorconfig

    定义和维护一致的编码风格。用于语法与编程规范检查

    .eslintignore

    你可以通过在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录。eslintignore 文件是一个纯文本文件,其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。以下将忽略所有的 JavaScript 文件:
    
    **/*.js
    
    当 ESLint 运行时,在确定哪些文件要检测之前,它会在当前工作目录中查找一个 .eslintignore 文件。如果发现了这个文件,当遍历目录时,将会应用这些偏好设置。一次只有一个 .eslintignore 文件会被使用,所以,不是当前工作目录下的 .eslintignore 文件将不会被用到。
    

    .eslintrc.js

    eslint用来规范自己的代码风格,减少程序出错的概率
    .eslintrc.js就是一种eslint检测规范的配置文件

    ESLint 支持几种格式的配置文件,如果同一个目录下有多个配置文件,ESLint 只会使用一个。优先级顺序如下:
    
    JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
    YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
    JSON -使用 .eslintrc.json 去定义配置的结构,ESLint 的 JSON 文件允许 JavaScript 风格的注释。
    Deprecated -使用 .eslintrc,可以使 JSON 也可以是 YAML。
    package.json - 在 package.json 里创建一个 eslintConfig属性,在那里定义你的配置。
    

    .gitignore

    提交到github远程库时被忽略文件或目录的配置文件

    .postcssrc.js

    PostCSS也是规范代码风格,可以帮助我们提高CSS代码质量。
    .postcssrc.js就是检查css代码规范的配置文件

    index.html

    主页

    package-lock.json

    package-lock.json是当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖,以便后续重新安装的时候生成相同的依赖,而忽略项目开发过程中有些依赖已经发生的更新。类似与yarn.lock

    package.json

    包管理工具通过package.json管理依赖包,package.json是一个包管理的配置文件

    README.md

    项目的说明文件

    . yarn.lock

    类似于package-lock.json

    重点了解一下src目录

    main.js

    // node_modules中引入vue模块。
    import Vue from 'vue'
    // 当前目录的app.vue文件
    import App from './App'
    // 引入router.js
    import router from './router'
    
    // 设置为 false 以阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false
    
    // eslint规范,/* eslint-disable no-new */不写就蹦了,为什么?
    // 因为js中new 一个对象的时候,规范的写法是赋值给某个变量,这里设置eslint-disable,就是为了检测时跳过接下来这行代码
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      //根组件的模板
      template: '<App/>',
      //子组件
      components: { App }
    })
    

    App.vue

    这是一个单文件组件,而且是根组件,是在main.js中渲染的模板和子组件

    它和之前的写法不一样,但是道理是一样的,之前的<div id="app"></div>作为根组件模板是直接写在html中,现在是通过模板的形式渲染到页面

    template:
    模板中的根元素只能有一个,它会被渲染成组件的根元素,

    script:
    组件的数据,方法,通过export.default导出

    style:
    css部分

    router.js

    路由配置

    路由肯定是要导出的

    export default new Router({
      routes: []
    })
    

    开始配置路由:

    export default new Router({
      routes: [
        {
          path: '/home',
          name: 'home'
          // 它的组件是home组件
          component: home
        },
        {
          path: '/about',
          name: 'about',
          // 它的组件是about
          component: about
        }
      ]
    })
    

    这里用到了Router构造函数,还有各自的组件,所以不要忘了在首行导入 vue 和 vue-router 和组件

    // 引入vue
    import Vue from 'vue'
    // 导入路由
    import Router from 'vue-router'
    // 导入模板
    import home from '@/components/home'
    import about from '@/components/about'
    

    路由会被main.js引入

    原文地址:https://segmentfault.com/a/1190000012781652

  • 相关阅读:
    Kubernetes(十一) 部署doshboard
    kubernetes(一)kubeadm安装
    kubernetes安装-二进制
    使用Jmeter+Maven+Jenkins实现接口自动化测试
    使用Jmeter在linux环境实现分布式负载
    Jmeter连接Mysql和Oracle数据库
    Jmeter如何实现参数化用户,并且管理Cookie
    开启MYSQL慢查询日志,监控有效率问题的SQL
    使用jmeter+ant+jenkins实现接口自动化测试
    使用Jmeter对SHA1加密接口进行性能测试
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9959861.html
Copyright © 2011-2022 走看看