vue-cli 运行机制

最新推荐文章于 2024-06-11 22:24:51 发布

小~小

最新推荐文章于 2024-06-11 22:24:51 发布

阅读量1.8k

点赞数 3

分类专栏： vue搭建项目文章标签： vue-cli vue 脚手架 vue vue-cli 运行流程运行机制

本文链接：https://blog.csdn.net/u014196765/article/details/82699767

版权

vue搭建项目专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue-cli 是怎样运行起来的呢，也许直接用 script 引入 vue.js 能够明白，就当作一个插件使用，但是 vue结合 webpack 开创了新的开发方式，直接利用 .vue文件进行开发，那么这个是如何运行起来的呢。下面我们一起研究。

首先是运行 npm run dev 启动项目，这个命令是在package.json里配置的。

这里写图片描述

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

这个是 webpack 的命令，
webpack-dev-server 启动一个使用 express 的 Http 服务器
运行这个命令在目标文件夹中是看不到编译后的文件,实时编译后的文件都保存到了内存当中。所以在目标文件夹中都看不到编译后的文件。
–inline 实时监听页面变化，自动刷新。
–progress 显示打包的进度
–config 指定读取哪个配置文件

webpack.dev.conf.js里引入了webpack.base.conf.js

在webpack.base.conf.js里配置了入口文件main.js

 entry: {
    app: './src/main.js'
  },

找到入口文件main.js
在 main.js中应用了 vue 最基础的代码

// 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'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

那么这个 main.js 是如何应用到 index.html 里呢，当然就是通过上面的入口文件配置，
entry: { app: './src/main.js' },找到这个文件，再利用webpack.dev.conf.js里的html-webpack-plugin插件，自动生成一个 index.html,把编译好的的 js 文件，引入到 html 中。

  new HtmlWebpackPlugin({  //自动生成html文件,比如编译后文件的引入
    filename: 'index.html', //生成的文件名
    template: 'index.html', //模板
    inject: true //默认值，将js文件插入body的底部，当然你可以设置插在头部
  }),

然后我们再回过头来看 main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

通过template: '<App/>'把 App 组件应用到 html 中，如果不理解可以自己写个例子试试，那么我们来写一个，相信一目了然，我们直接新建一个 html 文件，通过 script 引入 vue，用最简单的方式解释最复杂的问题。代码如下,下面template: '<button-counter>'跟main.js 里的template: '<App/>'是一个原理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
  // 定义一个名为 button-counter 的新组件
  Vue.component('button-counter', {
    data: function () {
      return {
        count: 0
      }
    },
    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
  })
  // 需要编译器
  new Vue({
    el: '#app',
    template: '<button-counter>'
  })
</script>
</body>
</html>

这里没有介绍特别复杂的 webpack 的命令介绍和 vue 的基础，只是弄清楚整个的运行流程，相信在以后应用的时候能方便很多。

通过上面的介绍是不是对于整个 vue-cli 有个整体的认识了，那么如何应用其他组件，比如 element-ui，下篇我会再讲解。

小~小

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
3
评论
vue-cli 运行机制

vue-cli 是怎样运行起来的呢，也许直接用 script 引入 vue.js 能够明白，就当作一个插件使用，但是 vue结合 webpack 开创了新的开发方式，直接利用 .vue文件进行开发，那么这个是如何运行起来的呢。下面我们一起研究。首先是运行 npm run dev 启动项目，这个命令是在package.json里配置的。webpack-dev-server --in...
复制链接

扫一扫