vue源碼系列01_環境搭建

導包

依次使用 npm install 下載如下包

rollup 打包工具
@babel/core 用babel核心模塊
@babel/preset-env (babel將高級語法轉成低級語法)
rollup-plugin-babel (橋梁)
rollup-plugin-serve (實現靜態服務)
cross-env (設置環境變量)

相關配置

在根目錄下創建

rollup.config.js

import babel from 'rollup-plugin-babel';
import serve from 'rollup-plugin-serve';


export default{
    input: './src/index.js',
    output:{
        file: 'dist/umd/vue.js', //出口路徑
        name: 'Vue', // 指定打包后的變量名字
        format: 'umd', //統一模塊規范
        sourcemap: true, //es6->es5 開啟源碼調試，可以找到源代碼報錯的位置
    },
    plugins:[
        babel({
            exclude:"node_modules/**"
        }),
        process.env.ENV ==='development'?serve({
            open:true,
            openPage: '/public/index.html', //默認打開html的路徑
            port:3000,
            contentBase: ''
        }):null
    ]
}

在package.json中配置

"scripts": {
    "build:dev": "rollup -c", // 直接打包
    "serve":"cross-env ENV=development rollup -c -w" // 設置環境變量 development 并且打包 -w 實時監聽
 },

創建.babelrc

{
    "presets": [
        "@babel/preset-env"
    ]
}

創建目錄結構

在這里插入圖片描述
在index.html下導入vue打包文件

在src下創建index.js，console.log(“測試”)一下
最后在終端里 npm run serve查看控制臺即可查看是否搭建完成

本文鏈接：https://blog.csdn.net/Happy_Boy_z/article/details/106145119

智能推薦

互斥鎖互斥鎖也是屬于線程之間處理同步互斥方式，有上鎖/解鎖兩種狀態。互斥鎖函數接口 1）初始化互斥鎖 pthread_mutex_init() man 3 pthread_mutex_init (找不到的情況下首先 sudo apt-get install glibc-doc sudo apt-get install manpages-posix-dev) 動態初始化 int pthread_...

統計學習方法 - 樸素貝葉斯

引入問題：一機器在良好狀態生產合格產品幾率是 90%，在故障狀態生產合格產品幾率是 30%，機器良好的概率是 75%。若一日第一件產品是合格品，那么此日機器良好的概率是多少。貝葉斯模型生成模型與判別模型判別模型，即要判斷這個東西到底是哪一類，也就是要求y，那就用給定的x去預測。生成模型，是要生成一個模型，那就是誰根據什么生成了模型，誰就是類別y，根據的內容就是x 以上述例子，判斷一個生產出...

styled-components —— React 中的 CSS 最佳實踐

https://zhuanlan.zhihu.com/p/29344146 Styled-components 是目前 React 樣式方案中最受關注的一種，它既具備了 css-in-js 的模塊化與參數化優點，又完全使用CSS的書寫習慣，不會引起額外的學習成本。本文是 styled-components 作者之一 Max Stoiber 所寫，首先總結了前端組件化樣式中的最佳實踐原則，然后在此基...

基于TCP/IP的網絡聊天室用Java來實現

基于TCP/IP的網絡聊天室實現開發工具:eclipse 開發環境:jdk1.8 發送端接收端工具類運行截圖...