前端項目搭建

時間  2019-12-12
標籤 前端 項目 搭建 简体版
原文   原文鏈接

文件說明

build　裏面是一些操做文件，使用npm run * 時其實執行的就是這裏的文件css

config 配置文件，執行文件須要的配置信息html

src　 資源文件，全部組件以及所用的圖片前端

  • assets  資源文件夾，放圖片之類的資源
  • components  組件文件夾，寫的全部組件都放在這個文件夾下
  • router  路由文件夾，這個決定了也面的跳轉規則
  • App.vue應用組件，全部本身寫的組件，都是在這個組件之上運行了
  • main.js    webpack入口文件
  • webpack四大特性entry入口、output輸出，loader加載器，plugins插件

node_modules　　　　　文件夾，這裏放的就是全部依賴的模塊vue

 

static 　　　　　　　　　用來放沒有npm包的第三方插件，字體文件node

package.json　　　　　　配置信息模塊webpack

index.js　　　　　　　　  入口文件git

./src/main.js   　　　　　　入口

entry point　　　　　　    入口點.github

npm init　　　　　　        初始化，建立package.jsonweb

npm install　　　　          將package.json模塊安裝到node-modules文件職工shell

npm run 　　　　　　      執行配置在package.json中的腳本

npm run build 　　　　　 打包

PostCSS

是一款使用插件去轉換CSS的工具，有許多很是好用的插件，例如autoprefixer,cssnext以及CSS Modules。

Autoprefixer是一個根據can i use解析css而且爲其添加瀏覽器廠商前綴的PostCSS插件。

Babel

babel

下一代JavaScript 語法的編譯器它可讓你放心使用大部分的JavaScript的新的標準的方法，而後編譯成兼容絕大多數的主流瀏覽器的代碼。在項目工程腳手架中，通常會使用.babelrc文件，經過配置一些參數配合webpack進行打包壓縮。

 

環境搭建

初始化

進入項目目錄，而後命令行運行 npm init ，按照提示進行初始化便可。提示中的信息，能寫的都寫上，別隨意忽略了。初始化完成以後，項目根目錄下會有 package.json 的文件。

規範版本號

打開 package.json 文件，將版本號定義爲 "version": "0.0.1" 。之後咱們每次正式提交代碼，版本號都不同。版本號分三級，分別爲：

  • 一級，重構版本
  • 二級，重大功能改進
  • 三級，小升級或者 bug 修復

爲什麼從 0.0.1 開始？由於 0.x.x 能夠認爲是非正式版本、測試版，而從 1.x.x 開始，就是正式發佈的版本了。

規範一級目錄

項目的一級目錄要提早規範好，最起碼一些經常使用的目錄要提早訂好留用，不能亂來。例如：

  • src - 源代碼
  • release - 發佈結果
  • test - 單元測試用例
  • doc - 文檔
  • example - 示例

構建工具

這部分比較獨立，內容也比較多，就不詳細講了，用最經常使用的 webpack 作一個簡單演示吧。

安裝插件 npm i babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest webpack webpack-cli --save-dev  --registry=https://registry.npm.taobao.org

。

https://npm.taobao.org/ 

 

項目根目錄下建立 .babelrc 文件，內容如

{ "presets": ["es2015", "latest"], "plugins": [] }

項目根目錄下建立 webpack.config.js 文件，內容如

module.exports = { entry: './src/index.js', output: { path: __dirname, filename: './release/bundle.js' }, module: { rules: [{ test: /\.js?$/, exclude: /(node_modules)/, loader: 'babel-loader' }] } }

最後，修改 package.json 中的 scripts ，增長 "release": "webpack" 。而後命令行運行 npm run release ，就可生成 release 的內容。

運行示例

release 的內容已經發布出來了，還要運行起來，最簡單的方式，在example建立test.html，而後引用 release 的內容。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>example</title> </head> <body> <p>example</p> <script src="../release/bundle.js"></script> </body> </html>

爲什麼規範化運行，能夠修改 package.json 中的 scripts ，增長 "example": "http-server -p 8880" 。而後命令行運行 npm run example ，瀏覽器訪問 http://localhost:8880/example/test.html 。

規範 git 分支

至少要存在兩個分支，master 和 dev ， dev 是開發中的代碼。固然，你能夠規範更多的分支，例如 next fix-bug 等，可是注意一個原則 —— 用不到的就先不要規劃。

完善 README.md

README.md 是開源項目的一張臉，用戶的第一印象。必須包含如下內容：

  • 產品簡介（此處要突出特色，打差別化競爭）
  • 產品安裝和下載
  • 快速使用（詳細的使用文檔或者二次開發文檔，外鏈便可）
  • 交流提問區
  • 關於做者（放你的博客連接，和收款二維碼）

最後，把以上完成的工做，都提交到 github 中。

提交代碼

寫代碼

具體寫什麼代碼不是本文的重點，你盡情的根據本身的項目來寫本身的代碼就是了。記得必定要使用編碼規範的工具，例如 es-lint 等，不然通過長時間的維護，必然留坑。

寫文檔 & 寫測試用例

注意，文檔和測試用例對於一個開源產品來講很是重要！很是重要！很是重要！並且，文檔和測試用例自己就是代碼不可分割的一部分。

如何寫測試用例，須要用到其餘工具，內容也相對獨立，這裏就不介紹了，本身去查一查吧。再次強調，測試用例很重要！！！

在寫文檔以前，還須要準備其餘的工具。定位到項目目錄下，npm i gitbook-cli -g 安裝 gitbook ，而後建立 SUMMARY.md ，內容以下：

# Summary * [項目介紹](README.md) * [使用文檔](doc/use/README.md) * [使用1](doc/use/use1.md) * [使用2](doc/use/use2.md) * [二次開發](doc/dev/README.md) * [開發1](doc/dev/dev1.md) * [開發2](doc/dev/dev2.md)

其實一看這個文件內容就知道，這是一個文檔的目錄，你能夠根據本身項目的須要從新定義這個目錄。須要注意的是，第一行 * [項目介紹](README.md) 對應的是已經存在的 README.md 文件。

運行 gitbook init ，會看到各個文件都被建立了，就能夠完善各個文檔的內容。內容完成以後，運行 gitbook build 能夠將 md 文件發佈爲 html 文件，默認放在 _book 文件夾。啓動了 npm run example 以後，能夠訪問 http://127.0.0.1:8880/_book/ 查看效果。

最後，再次修改一下 README.md ，把文檔的連接加上

[如何使用](./doc/use/README.md) [二次開發](./doc/dev/README.md)

提交初版代碼

首先，修改一下 .gitignore 文件，加上一行 _book ，把打包出來的文件忽略掉。而後用以前的方式提交到 github 的 master 分支，這裏再也不贅述了。

接下來，建立 tag 並提交，代碼以下：

git tag -a 'v0.0.1' -m 'first commit' git push origin v0.0.1

提交以後，下載地址就有了 ， https://github.com/fast-cache/fast-cache/releases 這裏能夠下載到各個版本的源碼。

最後要提交到 npm 上，能讓使用者經過 npm 進行安裝。首先，運行 npm add user 和 npm login 來登陸，根據提示將你以前註冊 npm 時的帳號、密碼、郵箱寫上就好了，問題不大。而後，在項目的根目錄運行 npm publish . ，此時問題來了！！！

運行以後報了 403 錯誤，剛纔明明登陸成功了，不可能有權限問題呀。後來一查才知道，原來 fast-cache 在 npm 中和其餘項目重名了！！！沒辦法，只能更名，將 package.json 中的名稱改成 fast-cache-npm ，而後再發布就成功了。

發佈以後，經過 https://www.npmjs.com/package/fast-cache-npm 就能夠訪問 npm 項目主頁了。

注意，爲項目取名時，必定要提早把名字在 github 和 npm 搜索一下，確認沒有重名才行！！！

升級代碼並提交

上述是第一次提交代碼的流程，下面簡述一下升級代碼以後的提交流程。在代碼開發階段的步驟總結以下：

  • 來一個 dev 分支，不要在 master 分支開發
  • 修改 package.json 版本號，按照以前既定的版本規則修改，不能亂改
  • 修改代碼、文檔和測試用例
  • 自測
  • 將 dev 分支提交到遠程

代碼開發完成以後，提交的流程以下：

  • 再次確認版本號，由於版本號很是重要
  • 將 dev 合併到 master ，並提交 master 到遠程
  • 建立 tag 並提交到遠程
  • 提交到 npm

合併 pr

pr 即 Pull Request 的簡稱。

開源軟件最大的特點就是容許全世界的開發者都能爲其貢獻代碼，你這個開源項目也不例外。其餘人頗有可能會經過 github 的 pr 爲你的項目貢獻本身的代碼，到時候你既得欣然接受，又不能茫然接受。

其餘人貢獻的 pr 能夠經過 https://github.com/fast-cache/fast-cache/pulls 連接看到。對於每個 pr ，若是你想合併，直接 merge 就行了（合併完以後，本地代碼要隨時更新一下）；若是你不想合併，留言說明而後關閉掉便可。

建立官網

咱們經過 github pages 的機制便可免費建立項目的掛網，不用花一分錢。

建立項目

登陸 github ，建立一個名爲 fast-cache.github.io 的項目，名字必須是這一個！！！而後下載到本地，即 git clone xxxx 。而後，進入項目目錄，新建一個 index.html ，而後隨便寫點什麼，例如 <h1>hello world</h1> ，提交到 github 遠程。

最後，訪問 fast-cache.github.io ，你就能看到剛纔的內容了，最簡單的官網就這麼出來了。作到這裏，你應該知道 github pages 就是一個靜態頁面的服務器，上傳相應的 html 就能顯示。

生成官網

此前用 gitbook 將文檔生成爲 html 了，應該還記得。那麼咱們如今從新運行 gitbook build 生成 html ，而後將全部的 html 拷貝到這裏來，所有提交上去，正式的官網也就出來了。

圖片描述

更新 README.md

記得要修改 README.md ，把官網的地址加進去。


做者：雙越
連接：https://www.imooc.com/article/28240
來源：慕課網
本文原創發佈於慕課網 ，轉載請註明出處，謝謝合做

.postcssrc.js

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程