调试环境

  • 安装依赖：npm i

    安装phantom.js 时即可终止

  • 安装rollup：npm i -g rollup

  • 修改dev脚本，添加--sourcemap，package.json

    1. "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",

  • 运行开发命令：npm run dev

  • 引入前面创建的 vue.js
    1. <script src="../../dist/vue.js"></script>

    runtime：仅包含运行时，不包含编译器 common：cjs规范，用于webpack1 esm：ES模块，用于webpack2+ umd: universal module defifinition，兼容cjs和amd，用于浏览器

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <title>Vue.js </title>
  6.   <script src="../../dist/vue.js"></script>
  7. </head>
  9. <body>
  10.   <div id="app">
  11.     {{msg}}
  12.   </div>
  13.   <script>
  14.     const app =new Vue({
  15.       el: '#app',
  16.       data: {
  17.         msg: 'Hello Vue!'
  18.       },
  19.     })
  20.     console.log(app)
  21.   </script>
  22. </body>
  24. </html>

代码结构

  1. ├─dist                   # 项目构建后的文件
  2. ├─scripts                # 与项目构建相关的脚本和配置文件
  3. ├─flow                   # flow的类型声明文件
  4. ├─src                    # 项目源代码
  5. │    ├─complier          # 与模板编译相关的代码
  6. │    ├─core              # 通用的、与运行平台无关的运行时代码
  7. │    │  ├─observe        # 实现变化侦测的代码
  8. │    │  ├─vdom           # 实现virtual dom的代码
  9. │    │  ├─instance       # Vue.js实例的构造函数和原型方法
  10. │    │  ├─global-api     # 全局api的代码
  11. │    │  └─components     # 内置组件的代码
  12. │    ├─server            # 与服务端渲染相关的代码
  13. │    ├─platforms         # 特定运行平台的代码，如weex
  14. │    ├─sfc               # 单文件组件的解析代码
  15. │    └─shared            # 项目公用的工具代码
  16. └─test                   # 项目测试代码