2.引入webpack dllreferenceplugin,提前打包公共**(polyfill和vue全家桶),提高構建速度;
3.支援less、sass,支援postcss配置,自動引入polyfill(可刪除);
3.手動搭建webpack腳手架,脫離vue-cli,可自我根據需要自定義調整webpack配置;
4.一經執行,即可同時執行客戶端和服務端,並針對dev和prod環境做區分。dev環境使用webpack devserver中的express插槽,prod環境使用express static對映前端靜態檔案
webpack4 + es6 + vue + express
git clone
cd vue-server-template
#安裝依賴
npm install
#打包lib
npm run postinstall
#本地開發
npm run dev
#線上執行
npm start
#訪問位址
#打包lib(npm install時自動呼叫該鉤子)
npm run postinstall
#執行webpack.dll.js,打包lib
npm run build-lib
#本地執行
npm run dev
#打包客戶端
npm run build-client
#client-server打包
npm run build-server
#使用pm2執行工程
npm run start-project
#線上執行工程
npm start
├── build // webpack配置
│ ├── webpack.client.js // webpack client端打包配置
│ ├── webpack.dll.js // webpack dllplugin打包配置
│ ├── webpack.server.js // webpack server端打包配置
├── lib // dllplugin 相關lib
├── src // 源**
│ ├── client // client客戶端源**
│ │ ├── assets // 靜態資源
│ │ ├── components // 公用元件
│ │ ├── layout // 布局元件
│ │ ├── views // 頁面路由元件
│ │ ├── stores // store,狀態管理
│ │ ├── tool // 通用公共函式
│ │ ├── index.html // html模板
│ │ ├── main.js // 入口
│ ├── server // server 源**
│ │ └── route.js // express路由中介軟體配置
├── static // 靜態檔案目錄
├── babele.config.js // babel-loader 配置
├── config // 工程全域性公共配置(port、host等)
├── postcss.config.js // postcss-loader 配置
├── .editorconfig // 編輯器配置
├── .gitignore // git 忽略項
├── package-lock.json // npm 鎖檔案
├── package.json // npm 配置
├── pm2.json // pm2 入口
├── readme.md // readme 文件
全棧初始構建指令vue express
npm install express generator g npm run install 安裝依賴包 生成 package.json 檔案 npm startvar port normalizeport process.env.port 3000 npm install webpack gwe...
Web全棧課程4 資料互動 http
http所有的資料請求對於伺服器的處理來說,都是表單提交 除了websocket 表單ajax jsonp websocket 1 3個版本 http1.0 http1.1 http2.0 2 http和https http 容易被攻擊被竊聽 https http secrity 安全,https需...
javascript全棧開發實踐 web 2
我們目前僅僅測試實現了鉛筆的功能。接下來我們繼續增加乙個新的功能 螢光筆。螢光筆通常是帶有一定顏色,並且具有半透明特性,可以把下面的字跡顯露出來。而為了在鉛筆和螢光筆之間進行切換,我們就需要增加兩個按鈕,來實現這個切換功能。如下 background lightgrey pencil onclick...