vue yarn启动项目 vue项目启动原理详解

转载

mob64ca1402665b 2023-09-27 07:07:15

文章标签 vue yarn启动项目 vue ios Vue App 文章分类 Yarn 大数据

vue2.0项目启动后调用顺序：index.html-->main.js-->App.vue-->index.js-->components/组件

一般项目创建好后会有四个文件：index.html、main.js、app.vue、index.js

1、index.html：所有vue文件都是单页面形式开发，所有vue组件都是通过index.html进行渲染。

vue yarn启动项目 vue项目启动原理详解_vue

2、main.js：相当于java的入口函数，控制初次启动vue项目要加载的组件

import Vue from 'vue' /* 这里是引入vue文件 */ import App from './App' /* 这里是引入同目录下的App.vue模块 */ import router from './router' /* 这里是引入vue的路由 */ import Vuex from 'vuex' import store from './vuex/store'

Vue.use(Vuex) //全局方法定义为Vuex

el:'#app'这个和index.html中的app组件挂钩。官网解释为：模板将会替换挂载的元素

watch：用来监听路由的变换，可以用来定义页面切换时的过渡效果。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' /* 这里是引入vue文件 */
import App from './App' /* 这里是引入同目录下的App.vue模块 */
import router from './router' /* 这里是引入vue的路由 */

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import Vuex from 'vuex'
import store from './vuex/store'

//导入vue-resource,并使用
import VueResource from 'vue-resource'

Vue.use(ElementUI);
Vue.use(VueResource);
Vue.use(Vuex);

//方法一
import axios from 'axios'
//其他vue组件中就可以this.$axios调用使用
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'  //关键代码
Vue.config.productionTip = false

/**
 * 方法二：结合vue-axios插件，
 * 安装插件后，就不需要将axios绑定到Vue原型链上了，
 * 组件内通过this.axios调用
 */
/*import axios from 'axios'
import VueAxios from "vue-axios";
Vue.use(VueAxios,axios)*/

/*关闭生产模式下给出的提示*/
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app', /* 定义作用范围就是index.html里的id为app的范围内 */
  data(){
    return{
      transitionName:'slide'
    }
  },
  store,
  router, /* 引入路由 */
  watch:{
    $route(to,from){
      //debugger
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      this.transitionName = toDepth < fromDepth ? 'slide_back' : 'slide'
      //根据路由深度，来判断是该从右侧进入还是该从左侧进入
    }
  },
  components: { App }, /* 注册引入的组件App.vue */
  template: '<App/>' /* 给Vue实例初始一个App组件作为template 相当于默认组件 */
})

3、App.vue默认为一个根组件。

vue yarn启动项目 vue项目启动原理详解_ios_02

4、index.js

引入组件的代码routes定义时，path为你以后页面间路由跳转的路径。name为import进来的名字,component也为这个名字。

vue yarn启动项目 vue项目启动原理详解_vue_03

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: { // dev 环境
    assetsSubDirectory: 'static',// 编译输出的二级目录
    assetsPublicPath: '/',// 编译发布的根目录，可配置为资源服务器域名或 CDN 域名
    outputDir:"dist", //打包时生成的生产环境构建文件的目录
    assetsDir: 'public', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录

    host: 'localhost', // can be overwritten by process.env.HOST
    port: 9080, // 运行测试页面的端口

    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    devtool: 'cheap-module-eval-source-map',
    cacheBusting: true,
    cssSourceMap: true, // 是否开启 cssSourceMap
    proxyTable: {
      '/api':{
        target:'http://localhost:8088',//你请求的第三方接口
        //secure:false,//如果是https接口，需要配置这个参数
        changeOrigin:true,//如果接口跨域，需要进行这个参数配置.在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite:{ //路径重写
          '^/api':'' //替换target中的请求地址，也就是说以后你在请求http://localhost:8088这个地址的时候直接写成/api即可
        }
      }
    }// 需要 proxyTable 代理的接口（可跨域）
  },

  build: { // production 环境
    index: path.resolve(__dirname, '../dist/index.html'),// 编译输入的 index.html 文件
    assetsRoot: path.resolve(__dirname, '../dist'),// 编译输出的静态资源路径
    assetsSubDirectory: 'static',// 编译输出的二级目录
    assetsPublicPath: '/',// 编译发布的根目录，可配置为资源服务器域名或 CDN 域名
    assetsDir: 'public', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录

    productionSourceMap: true,// 是否开启 cssSourceMap
    devtool: '#source-map',

    productionGzip: false,// 是否开启 gzip
    productionGzipExtensions: ['js', 'css'],// 需要使用 gzip 压缩的文件扩展名

    bundleAnalyzerReport: process.env.npm_config_report
  }
}

其他文件：

-build

-build.js 生产环境构建脚本

-utils.js 构建相关工具方法

-webpack.base.conf.js webpack基础配置

-webpack.dev.conf.js webpack开发环境配置

-webpack.prod.conf.js 生产环境配置

-confg 项目配置

–dev.env.js 开发环境变量

–index.js 项目配置文件

–prod.env.js 生产环境变量

–test.env.js 测试环境变量