• Vue进阶(二):Vue项目文件结构介绍


    #Vue进阶(二):Vue项目文件结构介绍

    1. main.js是我们的主项目入口文件,主要作用是初始化vue实例,并引入所需要的插件;
    2. App.vue是我们的主组件,所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以将router标示为App.vue的子组件。
    3. index.html文件入口;
    4. src放置组件和入口文件;
    5. node_modules为依赖的模块;
    6. config中配置了路径端口值等;
    7. build中配置了webpack的基本配置、开发环境配置、生产环境配置等;

    ##Vue如何加载main.js
        在Vue工程中使用src/main.js来加载App.vue文件,但没有代码写出来加载main.js的,而index.html中只有一个自定义标签app,那么工程是如何加载到main.js文件的呢?
        如果你是用vue.js官网提供的脚手架工具vue-cli并沿用默认配置的话,你执行npm run dev的时候会出来页面,是因为你根目录下的package.json文件里script配置了如下信息:

    "dev": "node build/dev-server.js"
    

      

        也就是其实执行的是dev-server.js这个文件,里面有定义

    var webpackConfig = require('./webpack.dev.conf');

    因为我们这个脚手架工具里是用webpack来打包项目文件的,依赖的    webpack.dev.conf文件里又定义了

    var baseWebpackConfig = require('./webpack.base.conf');

        在这个依赖webpack.base.conf文件里面entry入口文件就配置了

    app: './src/main.js'

        所以当你运行npm run dev的时候就从main.js这个入口文件开始执行了。
    ##注
    main.js

    /*关闭生产模式下给出的提示*/
    Vue.config.productionTip = false
  • 相关阅读:
    oracle列合并
    Java移位操作符
    angularjs 事件向上向下传播
    angularjs 路由 ngRoute tab切换
    angularjs 自定义服务
    angularjs 服务供应商
    angularjs 缓存 $q
    angularjs $location 服务
    angularjs $http 服务
    angularjs 自定义指令 directive
  • 原文地址:https://www.cnblogs.com/wu-chao/p/14132161.html
Copyright © 2020-2023  润新知