摘要:前言想想也已經(jīng)做過不少架構的項目了,有基于,基于,基于,基于的。好了,介紹完畢,接下來,我就從零開始,一步一步建起前后端完全分離的前端架構了。
前言
想想也已經(jīng)做過不少架構的項目了,有基于vue,基于react,基于thinkPHP,基于laravel的。
做多了,也就對現(xiàn)有的架構有各種想法,有好的,有壞的,總之,用起來還是不爽。vue-cli雖然可以很快地構建并使用,尤其是vue-cli v3.0,把webpack都封進@vue/cli的sdk里了,用起來更加干凈、簡潔。
但是,對于愛折騰的我們,好吧,開個玩笑。重來,但是,對于頁面的優(yōu)化,還有項目的架構,我們不得不做多多少少的修改。
好了,介紹完畢,接下來,我就從零開始,一步一步建起前后端完全分離的前端架構了。
步驟由于要介紹的很多,全寫在一篇里,有些太長了。
所以,我會分為:
創(chuàng)建開發(fā)環(huán)境下的webpack配置文件
配置eslint、babel、postcss
創(chuàng)建項目文件、目錄架構
通過koa實現(xiàn)本地數(shù)據(jù)接口模擬
創(chuàng)建發(fā)布環(huán)境下的webpack配置文件
創(chuàng)建測試環(huán)境下的webpack配置文件、以及測試用例 (TODO)
自動初始化構建項目(TODO)
這七篇來分別介紹。
開發(fā) 一、初始化項目創(chuàng)建項目文件夾
我們就叫vue-construct吧
初始化git
git init
初始化npm
npm init
創(chuàng)建項目文件
為了能讓webpack跑起來,而不是一口氣只講配置而不運行一下,那樣未免有些空洞,所以我們先創(chuàng)建一點項目文件和目錄。
在這之前我們先安裝兩個包:vue、vue-router, npm i -S vue vue-router。
我們將項目代碼相關文件都放在名為app的文件夾下。我先都創(chuàng)建完,然后一個個介紹。
</>復制代碼
├── app
│?? ├── app.vue
│?? ├── common
│?? │?? ├── img
│?? │?? ├── js
│?? │?? └── scss
│?? ├── index.html
│?? ├── index.js
│?? ├── router
│?? │?? └── index.js
│?? └── views
│?? └── home
│?? └── index.vue
├── .gitignore
├── package-lock.json
├── package.json
└── webpack.config.js
node_modules的話就忽略了。
文件/文件夾 | 用途 |
---|---|
app.vue | 作為vue的主文件 |
common | 里面放公共的代碼 |
index.html | 頁面模板文件 |
index.js | 項目主入口文件 |
router | 放vue對應的router文件 |
views | 放視圖文件 |
.gitignore | 忽略node_module |
咱們暫且不關系這些文件里的具體代碼是什么,等webpack配置完再說。
二、配置webpack.config.js安裝一系列的包:
為了webpack的運行,需要安裝
</>復制代碼
webpack
webpack-dev-server
為了處理vue單頁文件,安裝:
</>復制代碼
vue-loader
為了處理scss文件并從js中抽離,安裝:
</>復制代碼
node-sass
style-loader
css-loader
sass-loader
vue-style-loader
postcss
postcss-loader
autoprefixer
extract-text-webpack-plugin
為了處理圖片和字體文件,安裝:
</>復制代碼
file-loader
url-loader
為了支持高級語法-babel,安裝:
</>復制代碼
babel
babel-loader
babel-plugin-syntax-dynamic-import
babel-plugin-transform-object-rest-spread
babel-polyfill
babel-preset-env
為了驗證代碼格式-eslint,安裝:
</>復制代碼
eslint
eslint-loader
eslint-plugin-html
babel-eslint
配置webpack.config.js文件
</>復制代碼
const webpack = require("webpack")
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin")
// 為了抽離出兩份CSS,創(chuàng)建兩份ExtractTextPlugin
// base作為基礎的css,基本不變,所以,可以抽離出來充分利用瀏覽器緩存
// app作為迭代的css,會經(jīng)常改變
const isProduction = process.env.NODE_ENV === "production"
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const extractBaseCSS =
new ExtractTextPlugin(
{
filename:"static/css/base.[chunkhash:8].css",
allChunks: true,
disable: !isProduction // 開發(fā)環(huán)境下不抽離css
}
)
const extractAppCSS
= new ExtractTextPlugin(
{
filename:"static/css/app.[chunkhash:8].css",
allChunks: true,
disable: !isProduction // 開發(fā)環(huán)境下不抽離css
}
)
// 減少路徑書寫
function resolve(dir) {
return path.join(__dirname, dir)
}
// 網(wǎng)站圖標配置
const favicon = resolve("favicon.ico")
// __dirname: 總是返回被執(zhí)行的 js 所在文件夾的絕對路徑
// __filename: 總是返回被執(zhí)行的 js 的絕對路徑
// process.cwd(): 總是返回運行 node 命令時所在的文件夾的絕對路徑
const config = {
// sourcemap 模式
devtool: "cheap-module-eval-source-map",
// 入口
entry: {
app: [
"babel-polyfill", // 這里是配合babel-present-env導入的動態(tài)babel-polyfill,因此npm需dev依賴
resolve("app/index.js")
]
},
// 輸出
output: {
path: resolve("dev"),
filename: "index.bundle.js"
},
resolve: {
// 擴展名,比如import "app.vue",擴展后只需要寫成import "app"就可以了
extensions: [".js", ".vue", ".scss", ".css"],
// 取路徑別名,方便在業(yè)務代碼中import
alias: {
api: resolve("app/api/"),
common: resolve("app/common/"),
views: resolve("app/views/"),
components: resolve("app/components/"),
componentsBase: resolve("app/componentsBase/"),
directives: resolve("app/directives/"),
filters: resolve("app/filters/"),
mixins: resolve("app/mixins/")
}
},
// loaders處理
module: {
rules: [
{
test: /.js$/,
include: [resolve("app")],
loader: [
"babel-loader",
"eslint-loader"
]
},
{
test: /.vue$/,
exclude: /node_modules/,
loader: "vue-loader",
options: {
extractCSS: true,
loaders: {
scss: extractAppCSS.extract({
fallback: "vue-style-loader",
use: [
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "postcss-loader",
options: {
sourceMap: true
}
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
]
})
}
}
},
{
test: /.(css|scss)$/,
use: extractBaseCSS.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "postcss-loader",
options: {
sourceMap: true
}
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
]
})
},
{
test: /.(png|jpe?g|gif|svg|ico)(?.*)?$/,
loader: "url-loader",
options: {
limit: 8192,
name: isProduction
? "static/img/[name].[hash:8].[ext]"
: "static/img/[name].[ext]"
}
},
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: "url-loader",
options: {
limit: 8192,
name: isProduction
? "static/font/[name].[hash:8].[ext]"
: "static/font/[name].[ext]"
}
}
]
},
plugins: [
// html 模板插件
new HtmlWebpackPlugin({
favicon,
filename: "index.html",
template: resolve("app/index.html")
}),
// 抽離出css
extractBaseCSS,
extractAppCSS,
// 熱替換插件
new webpack.HotModuleReplacementPlugin(),
// 更友好地輸出錯誤信息
new FriendlyErrorsPlugin()
],
devServer: {
proxy: {
// 凡是 `/api` 開頭的 http 請求,都會被代理到 localhost:7777 上,由 koa 提供 mock 數(shù)據(jù)。
// koa 代碼在 ./mock 目錄中,啟動命令為 npm run mock。
"/api": {
target: "http://localhost:7777", // 如果說聯(lián)調(diào)了,將地址換成后端環(huán)境的地址就哦了
secure: false
}
},
host: "0.0.0.0",
port: "9999",
disableHostCheck: true, // 為了手機可以訪問
contentBase: resolve("dev"), // 本地服務器所加載的頁面所在的目錄
// historyApiFallback: true, // 為了SPA應用服務
inline: true, //實時刷新
hot: true // 使用熱加載插件 HotModuleReplacementPlugin
}
}
module.exports = {
config: config,
extractBaseCSS: extractBaseCSS,
extractAppCSS: extractAppCSS
}
總結(jié)
這一篇主要就做了三件事:
創(chuàng)建簡單的項目結(jié)構
安裝了這篇,以及之后要用到npm包
配置開發(fā)環(huán)境的Webpack
下一篇我們將配置eslint、babel、postcss - 從零開始做Vue前端架構(2)
項目完整代碼Vue前端架構-by 子咻
文章版權歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/11811.html
摘要:前言這一篇,我們將接著上篇來完成創(chuàng)建項目文件目錄架構??偨Y(jié)這篇主要是文件和目錄架構的東西,讀者務必運行一下完整的項目。因此,下一篇,我們將通過實現(xiàn)本地數(shù)據(jù)接口模擬從零開始做前端架構項目完整代碼前端架構子咻 前言 這一篇,我們將接著上篇來完成創(chuàng)建項目文件、目錄架構。 回顧 先回顧一下現(xiàn)在項目有哪些東西了: . ├── app │?? ├── app.vue │?? ├── common ...
摘要:前言上一篇我們遇到少年,是不是忘了的警告,這一篇我們就來解決這個問題??偨Y(jié)通過實現(xiàn)前后端分離,并且使用來更方便的模擬數(shù)據(jù)。下一篇,我們創(chuàng)建發(fā)布環(huán)境下的配置文件,并且看看怎么優(yōu)化產(chǎn)出的代碼的從零開始做前端架構項目完整代碼前端架構子咻 前言 上一篇我們遇到少年,是不是忘了npm run mock?的警告,這一篇我們就來解決這個問題。 開發(fā) 一、安裝包 安裝koa和一系列的包(我們用的是ko...
摘要:前言這一篇,我們將接著上篇來完成配置。開發(fā)一配置我們采用的方式來創(chuàng)建。對了,前提我們需要全局安裝。三配置創(chuàng)建文件,上配置配置總結(jié)這篇不多,就做了三件事,。下一篇我們將創(chuàng)建項目文件目錄架構從零開始做前端架構項目完整代碼前端架構子咻 前言 這一篇,我們將接著上篇來完成配置eslint、babel、postcss。 開發(fā) 一、配置eslint 我們采用eslint --init的方式來創(chuàng)建e...
摘要:前言這一篇,我們將接著上篇來完成配置。開發(fā)一配置我們采用的方式來創(chuàng)建。對了,前提我們需要全局安裝。三配置創(chuàng)建文件,上配置配置總結(jié)這篇不多,就做了三件事,。下一篇我們將創(chuàng)建項目文件目錄架構從零開始做前端架構項目完整代碼前端架構子咻 前言 這一篇,我們將接著上篇來完成配置eslint、babel、postcss。 開發(fā) 一、配置eslint 我們采用eslint --init的方式來創(chuàng)建e...
摘要:那該怎么管理這兩個不同的項目呢解決子模塊用的的同學肯定一下子就想到子模塊的知識了。最后,也希望有想法的同學還有大佬多多留言,給點建議原文地址從零開始做前端架構腳手架參考資料官方文檔使用定制前端腳手架別人寫的腳手架文件操作相關文檔子模塊 前言 相信很多人都用過vue-cli或create-react-app或者類似的腳手架。腳手架方便我們復制,粘貼,或者clone代碼庫,而且還可以更具用...
閱讀 2317·2021-11-15 11:38
閱讀 2446·2021-11-15 11:37
閱讀 2549·2021-08-24 10:00
閱讀 2910·2019-08-30 15:56
閱讀 1265·2019-08-30 15:53
閱讀 3703·2019-08-29 18:43
閱讀 2934·2019-08-29 17:01
閱讀 3258·2019-08-29 16:25
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要