校园网站建设计划书,长春网站建设模板服务,分类网站营销,做网站和推广需要多少钱VUE2.x源码学习笔记
1. rollup环境配置 首先在VScode中新建文件夹vue_sc#xff0c;然后终端打开定位到打开的文件夹#xff0c;输入“npm init -y”初始化配置项#xff0c;运行成功之后文件夹新增package.json文件 继续在终端运行npm install babel/preset-env ba…VUE2.x源码学习笔记
1. rollup环境配置 首先在VScode中新建文件夹vue_sc然后终端打开定位到打开的文件夹输入“npm init -y”初始化配置项运行成功之后文件夹新增package.json文件 继续在终端运行npm install babel/preset-env babel/core rollup rollup-plugin-babel rollup-plugin-serve -D 在vue_sc文件夹下新建文件夹src然后在src文件夹下新建index.js入口文件 function Vue(){}
export default Vue;配置rollup在vue_sc下新建文件rollup.config.js和.babelrc import babel from rollup-plugin-babel
import serve from rollup-plugin-serveexport default {input: ./src/index.js, // 打包的入口文件output: { // 打包的出口文件file: dist/vue.js,format: umd, // iife立即执行函数、esmES6 模块、cjsNode 规范、umd支持 amd cjsname: Vue, // 使用 umd 打包需要指定导出的模块名Vue 模块将会绑定到 window 上sourcemap: true, // 开启 sourcemap 源码映射打包时会生成 .map 文件作用浏览器调试ES5代码时可定位到ES6源代码所在行},plugins: [babel({ // 把高级语法转为初级语法exclude: node_modules/**, //排除不需要转化的}),serve({ port: 3000, // 端口3000contentBase: , // 空字符表示当前目录为基准openPage: /index.html, // 文件打开位置})]
}// babel的预解析
{presets: [babel/preset-env]
}在vue_sc文件夹下新建文件index.html !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapphello/div
/body
/html先修改package.json中scripts改为以下图片然后在终端输入npm run dev进行打包 dev脚本解释 rollup 命令默认会去找 node_module/bin/rollup-cconfig 选项使用配置文件默认找 rollup.config.js-wwatch 选项监听文件变化当文件发生变化时重新打包 注意如果报错遇到以下错误Error: Cannot find module ‘node:process’我解决的方式是降低rollup的版本我安装的是2.56.0版本 打包成功之后在vue_sc中自动添加dist文件夹终端成功界面如下 创建 html 引入 Vue 在根目录下创建index.html文件引入dist/vue.js打印Vue
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 引入 vue.js将会绑定到 window--script srcdist/vue.js/scriptscriptconsole.log(Vue) /script
/body
/html
