国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

從零開始做Vue前端架構(1)

frolc / 786人閱讀

摘要:前言想想也已經(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)建完,然后一個個介紹。

</>復制代碼

  1. ├── app
  2. │?? ├── app.vue
  3. │?? ├── common
  4. │?? │?? ├── img
  5. │?? │?? ├── js
  6. │?? │?? └── scss
  7. │?? ├── index.html
  8. │?? ├── index.js
  9. │?? ├── router
  10. │?? │?? └── index.js
  11. │?? └── views
  12. │?? └── home
  13. │?? └── index.vue
  14. ├── .gitignore
  15. ├── package-lock.json
  16. ├── package.json
  17. └── 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的運行,需要安裝

</>復制代碼

  1. webpack
  2. webpack-dev-server

為了處理vue單頁文件,安裝:

</>復制代碼

  1. vue-loader

為了處理scss文件并從js中抽離,安裝:

</>復制代碼

  1. node-sass
  2. style-loader
  3. css-loader
  4. sass-loader
  5. vue-style-loader
  6. postcss
  7. postcss-loader
  8. autoprefixer
  9. extract-text-webpack-plugin

為了處理圖片和字體文件,安裝:

</>復制代碼

  1. file-loader
  2. url-loader

為了支持高級語法-babel,安裝:

</>復制代碼

  1. babel
  2. babel-loader
  3. babel-plugin-syntax-dynamic-import
  4. babel-plugin-transform-object-rest-spread
  5. babel-polyfill
  6. babel-preset-env

為了驗證代碼格式-eslint,安裝:

</>復制代碼

  1. eslint
  2. eslint-loader
  3. eslint-plugin-html
  4. babel-eslint

配置webpack.config.js文件

</>復制代碼

  1. const webpack = require("webpack")
  2. const path = require("path")
  3. const HtmlWebpackPlugin = require("html-webpack-plugin")
  4. const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin")
  5. // 為了抽離出兩份CSS,創(chuàng)建兩份ExtractTextPlugin
  6. // base作為基礎的css,基本不變,所以,可以抽離出來充分利用瀏覽器緩存
  7. // app作為迭代的css,會經(jīng)常改變
  8. const isProduction = process.env.NODE_ENV === "production"
  9. const ExtractTextPlugin = require("extract-text-webpack-plugin")
  10. const extractBaseCSS =
  11. new ExtractTextPlugin(
  12. {
  13. filename:"static/css/base.[chunkhash:8].css",
  14. allChunks: true,
  15. disable: !isProduction // 開發(fā)環(huán)境下不抽離css
  16. }
  17. )
  18. const extractAppCSS
  19. = new ExtractTextPlugin(
  20. {
  21. filename:"static/css/app.[chunkhash:8].css",
  22. allChunks: true,
  23. disable: !isProduction // 開發(fā)環(huán)境下不抽離css
  24. }
  25. )
  26. // 減少路徑書寫
  27. function resolve(dir) {
  28. return path.join(__dirname, dir)
  29. }
  30. // 網(wǎng)站圖標配置
  31. const favicon = resolve("favicon.ico")
  32. // __dirname: 總是返回被執(zhí)行的 js 所在文件夾的絕對路徑
  33. // __filename: 總是返回被執(zhí)行的 js 的絕對路徑
  34. // process.cwd(): 總是返回運行 node 命令時所在的文件夾的絕對路徑
  35. const config = {
  36. // sourcemap 模式
  37. devtool: "cheap-module-eval-source-map",
  38. // 入口
  39. entry: {
  40. app: [
  41. "babel-polyfill", // 這里是配合babel-present-env導入的動態(tài)babel-polyfill,因此npm需dev依賴
  42. resolve("app/index.js")
  43. ]
  44. },
  45. // 輸出
  46. output: {
  47. path: resolve("dev"),
  48. filename: "index.bundle.js"
  49. },
  50. resolve: {
  51. // 擴展名,比如import "app.vue",擴展后只需要寫成import "app"就可以了
  52. extensions: [".js", ".vue", ".scss", ".css"],
  53. // 取路徑別名,方便在業(yè)務代碼中import
  54. alias: {
  55. api: resolve("app/api/"),
  56. common: resolve("app/common/"),
  57. views: resolve("app/views/"),
  58. components: resolve("app/components/"),
  59. componentsBase: resolve("app/componentsBase/"),
  60. directives: resolve("app/directives/"),
  61. filters: resolve("app/filters/"),
  62. mixins: resolve("app/mixins/")
  63. }
  64. },
  65. // loaders處理
  66. module: {
  67. rules: [
  68. {
  69. test: /.js$/,
  70. include: [resolve("app")],
  71. loader: [
  72. "babel-loader",
  73. "eslint-loader"
  74. ]
  75. },
  76. {
  77. test: /.vue$/,
  78. exclude: /node_modules/,
  79. loader: "vue-loader",
  80. options: {
  81. extractCSS: true,
  82. loaders: {
  83. scss: extractAppCSS.extract({
  84. fallback: "vue-style-loader",
  85. use: [
  86. {
  87. loader: "css-loader",
  88. options: {
  89. sourceMap: true
  90. }
  91. },
  92. {
  93. loader: "postcss-loader",
  94. options: {
  95. sourceMap: true
  96. }
  97. },
  98. {
  99. loader: "sass-loader",
  100. options: {
  101. sourceMap: true
  102. }
  103. }
  104. ]
  105. })
  106. }
  107. }
  108. },
  109. {
  110. test: /.(css|scss)$/,
  111. use: extractBaseCSS.extract({
  112. fallback: "style-loader",
  113. use: [
  114. {
  115. loader: "css-loader",
  116. options: {
  117. sourceMap: true
  118. }
  119. },
  120. {
  121. loader: "postcss-loader",
  122. options: {
  123. sourceMap: true
  124. }
  125. },
  126. {
  127. loader: "sass-loader",
  128. options: {
  129. sourceMap: true
  130. }
  131. }
  132. ]
  133. })
  134. },
  135. {
  136. test: /.(png|jpe?g|gif|svg|ico)(?.*)?$/,
  137. loader: "url-loader",
  138. options: {
  139. limit: 8192,
  140. name: isProduction
  141. ? "static/img/[name].[hash:8].[ext]"
  142. : "static/img/[name].[ext]"
  143. }
  144. },
  145. {
  146. test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
  147. loader: "url-loader",
  148. options: {
  149. limit: 8192,
  150. name: isProduction
  151. ? "static/font/[name].[hash:8].[ext]"
  152. : "static/font/[name].[ext]"
  153. }
  154. }
  155. ]
  156. },
  157. plugins: [
  158. // html 模板插件
  159. new HtmlWebpackPlugin({
  160. favicon,
  161. filename: "index.html",
  162. template: resolve("app/index.html")
  163. }),
  164. // 抽離出css
  165. extractBaseCSS,
  166. extractAppCSS,
  167. // 熱替換插件
  168. new webpack.HotModuleReplacementPlugin(),
  169. // 更友好地輸出錯誤信息
  170. new FriendlyErrorsPlugin()
  171. ],
  172. devServer: {
  173. proxy: {
  174. // 凡是 `/api` 開頭的 http 請求,都會被代理到 localhost:7777 上,由 koa 提供 mock 數(shù)據(jù)。
  175. // koa 代碼在 ./mock 目錄中,啟動命令為 npm run mock。
  176. "/api": {
  177. target: "http://localhost:7777", // 如果說聯(lián)調(diào)了,將地址換成后端環(huán)境的地址就哦了
  178. secure: false
  179. }
  180. },
  181. host: "0.0.0.0",
  182. port: "9999",
  183. disableHostCheck: true, // 為了手機可以訪問
  184. contentBase: resolve("dev"), // 本地服務器所加載的頁面所在的目錄
  185. // historyApiFallback: true, // 為了SPA應用服務
  186. inline: true, //實時刷新
  187. hot: true // 使用熱加載插件 HotModuleReplacementPlugin
  188. }
  189. }
  190. module.exports = {
  191. config: config,
  192. extractBaseCSS: extractBaseCSS,
  193. extractAppCSS: extractAppCSS
  194. }
總結(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

相關文章

  • 從零開始Vue前端架構(3)

    摘要:前言這一篇,我們將接著上篇來完成創(chuàng)建項目文件目錄架構??偨Y(jié)這篇主要是文件和目錄架構的東西,讀者務必運行一下完整的項目。因此,下一篇,我們將通過實現(xiàn)本地數(shù)據(jù)接口模擬從零開始做前端架構項目完整代碼前端架構子咻 前言 這一篇,我們將接著上篇來完成創(chuàng)建項目文件、目錄架構。 回顧 先回顧一下現(xiàn)在項目有哪些東西了: . ├── app │?? ├── app.vue │?? ├── common ...

    dinfer 評論0 收藏0
  • 從零開始Vue前端架構(4)

    摘要:前言上一篇我們遇到少年,是不是忘了的警告,這一篇我們就來解決這個問題??偨Y(jié)通過實現(xiàn)前后端分離,并且使用來更方便的模擬數(shù)據(jù)。下一篇,我們創(chuàng)建發(fā)布環(huán)境下的配置文件,并且看看怎么優(yōu)化產(chǎn)出的代碼的從零開始做前端架構項目完整代碼前端架構子咻 前言 上一篇我們遇到少年,是不是忘了npm run mock?的警告,這一篇我們就來解決這個問題。 開發(fā) 一、安裝包 安裝koa和一系列的包(我們用的是ko...

    xuweijian 評論0 收藏0
  • 從零開始Vue前端架構(2)

    摘要:前言這一篇,我們將接著上篇來完成配置。開發(fā)一配置我們采用的方式來創(chuàng)建。對了,前提我們需要全局安裝。三配置創(chuàng)建文件,上配置配置總結(jié)這篇不多,就做了三件事,。下一篇我們將創(chuàng)建項目文件目錄架構從零開始做前端架構項目完整代碼前端架構子咻 前言 這一篇,我們將接著上篇來完成配置eslint、babel、postcss。 開發(fā) 一、配置eslint 我們采用eslint --init的方式來創(chuàng)建e...

    Brenner 評論0 收藏0
  • 從零開始Vue前端架構(2)

    摘要:前言這一篇,我們將接著上篇來完成配置。開發(fā)一配置我們采用的方式來創(chuàng)建。對了,前提我們需要全局安裝。三配置創(chuàng)建文件,上配置配置總結(jié)這篇不多,就做了三件事,。下一篇我們將創(chuàng)建項目文件目錄架構從零開始做前端架構項目完整代碼前端架構子咻 前言 這一篇,我們將接著上篇來完成配置eslint、babel、postcss。 開發(fā) 一、配置eslint 我們采用eslint --init的方式來創(chuàng)建e...

    YanceyOfficial 評論0 收藏0
  • 從零開始Vue前端架構(9)

    摘要:那該怎么管理這兩個不同的項目呢解決子模塊用的的同學肯定一下子就想到子模塊的知識了。最后,也希望有想法的同學還有大佬多多留言,給點建議原文地址從零開始做前端架構腳手架參考資料官方文檔使用定制前端腳手架別人寫的腳手架文件操作相關文檔子模塊 前言 相信很多人都用過vue-cli或create-react-app或者類似的腳手架。腳手架方便我們復制,粘貼,或者clone代碼庫,而且還可以更具用...

    Vicky 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<