# 一、項(xiàng)目初始化## 使用 Vue CLI 創(chuàng)建項(xiàng)目> 注意：不要使用 Git Bash 執(zhí)行項(xiàng)目創(chuàng)建操作，使用 cmd 或者 powershell 之類的工具。> 如果你還沒有安裝 VueCLI，或者版本低于 4，請(qǐng)執(zhí)行下面的命令安裝或是升級(jí)： > > ```shell > npm install --global @vue/cli > ```在命令行中輸入以下命令創(chuàng)建 Vue 項(xiàng)目： ```shell vue create toutiao-publish-admin ``````shell Vue CLI v4.2.3 ? Please pick a preset:default (babel, eslint) > Manually select features ``` > default：默認(rèn)勾選 babel、eslint，回車之后直接進(jìn)入裝包 > > manually：自定義勾選特性配置，選擇完畢之后，才會(huì)進(jìn)入裝包 > > 選擇第 2 種：手動(dòng)選擇特性，支持更多自定義選項(xiàng)```shell ? Please pick a preset: Manually select features ? Check the features needed for your project:(*) Babel( ) TypeScript( ) Progressive Web App (PWA) Support(*) Router( ) Vuex(*) CSS Pre-processors >(*) Linter / Formatter( ) Unit Testing( ) E2E Testing ``` > 分別選擇： > Babel：es6 轉(zhuǎn) es5 > Router：路由 > CSS Pre-processors：CSS 預(yù)處理器，后面會(huì)提示你選擇 less、sass、stylus 等 > Linter / Formatter：代碼格式校驗(yàn)，ESLint 代碼格式校驗(yàn)```shell ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n ``` > 是否使用 history 路由模式，這里輸入 `n` 不使用```shell ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):Sass/SCSS (with dart-sass)Sass/SCSS (with node-sass) > LessStylus ``` > 選擇 CSS 預(yù)處理器，這里選擇我們熟悉的 Less```shell ? Pick a linter / formatter config:ESLint with error prevention onlyESLint + Airbnb config > ESLint + Standard configESLint + Prettier ``` > 選擇校驗(yàn)工具，這里選擇 ESLint + [Standard config](https://standardjs.com/)```shell ? Pick additional lint features:(*) Lint on save >(*) Lint and fix on commit ``` > 選擇在什么時(shí)機(jī)下觸發(fā)代碼格式校驗(yàn)： > - Lint on save：每當(dāng)保存文件的時(shí)候 > - Lint and fix on commit：每當(dāng)執(zhí)行 `git commit` 提交的時(shí)候 > > 這里建議兩個(gè)都選上，更嚴(yán)謹(jǐn)。```shell ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) > In dedicated config filesIn package.json ``` > Babel、ESLint 等工具會(huì)有一些額外的配置文件，這里的意思是問你將這些工具相關(guān)的配置文件寫到哪里： > - In dedicated config files：分別保存到單獨(dú)的配置文件 > - In package.json：保存到 package.json 文件中 > > 這里建議選擇第 1 個(gè)，保存到單獨(dú)的配置文件，這樣方便我們做自定義配置。```shell ? Save this as a preset for future projects? (y/N) N ``` > 這里里是問你是否需要將剛才選擇的一系列配置保存起來，然后它可以幫你記住上面的一系列選擇，以便下次直接重用。> 這里根據(jù)自己需要輸入 y 或者 n，我這里輸入 n 不需要。```shell ? Creating project in C:\Users\LPZ\Desktop\topline-m-fe89\topline-m-89. � Initializing git repository... ? Installing CLI plugins. This might take a while...[ ........] - extract:object-keys: sill extract json5@2.1.1 ``` > 向?qū)渲媒Y(jié)束，開始裝包。 > 安裝包的時(shí)間可能較長(zhǎng)，請(qǐng)耐心等待......```shell ? Running completion hooks...� Generating README.md...� Successfully created project topline-m-89. � Get started with the following commands:$ cd topline-m$ npm run serve ``` 安裝結(jié)束，命令提示你項(xiàng)目創(chuàng)建成功，按照命令行的提示在終端中分別輸入：```shell # 進(jìn)入你的項(xiàng)目目錄 cd toutiao-webapp# 啟動(dòng)開發(fā)服務(wù) npm run serve ``````shellDONE Compiled successfully in 7527msApp running at:- Local: http://localhost:8080/- Network: http://192.168.10.216:8080/Note that the development build is not optimized.To create a production build, run npm run build. ``` > 啟動(dòng)成功，命令行中輸出項(xiàng)目的 http 訪問地址。 > 打開瀏覽器，輸入其中任何一個(gè)地址進(jìn)行訪問。如果能看到該頁(yè)面，恭喜你，項(xiàng)目創(chuàng)建成功了。## 初始目錄結(jié)構(gòu)說明## 加入 Git 版本管理建議在項(xiàng)目的一開始就加入版本管理，通過版本管理，我們可以得到很多好處，例如：- 代碼備份 - 多人協(xié)作 - 歷史記錄 - ....下面是具體的操作流程。（1）創(chuàng)建遠(yuǎn)程倉(cāng)庫(kù)（GitHub、Gitee、coding）。。。。（2）把本地倉(cāng)庫(kù)推送到遠(yuǎn)程倉(cāng)庫(kù)如果沒有本地倉(cāng)庫(kù)：```shell # 初始化本地倉(cāng)庫(kù) git init# 把文件添加到暫存區(qū) git add README.md# 把暫存區(qū)文件提交到本地倉(cāng)庫(kù)形成歷史記錄 git commit -m "first commit"# 添加遠(yuǎn)端倉(cāng)庫(kù)地址到本地倉(cāng)庫(kù) git remote add origin https://github.com/lipengzhou/toutiao-publish-admin.git# 推送到遠(yuǎn)程倉(cāng)庫(kù) git push -u origin master ```如果已有本地倉(cāng)庫(kù)> VueCLI 在創(chuàng)建項(xiàng)目的時(shí)候自動(dòng)幫你初始化了 `Git` 倉(cāng)庫(kù)，并且基于初始代碼默認(rèn)執(zhí)行了一次提交。```shell git remote add origin https://github.com/lipengzhou/toutiao-publish-admin.git# -u 就是記住本次推送的信息，下次就不用寫推送信息了，可以直接 git push git push -u origin master ```（3）之后如果有代碼變動(dòng)需要提交```shell git add git commit# 推送到遠(yuǎn)程倉(cāng)庫(kù) # 推送的時(shí)候如果不改變遠(yuǎn)程倉(cāng)庫(kù)和分支的話就直接 git push# 如果推送的遠(yuǎn)程倉(cāng)庫(kù)或是分支改變了 $ git push -u 遠(yuǎn)程倉(cāng)庫(kù) 分支名稱 ```> 擴(kuò)展：管理遠(yuǎn)程倉(cāng)庫(kù)地址信息 > > ```shell > # 查看使用幫助 > git remote --help > > # 查看所有的遠(yuǎn)程倉(cāng)庫(kù)信息 > git remote -v > > # 添加遠(yuǎn)程倉(cāng)庫(kù)地址信息 > git remote add 名稱 遠(yuǎn)程倉(cāng)庫(kù)地址 > > # 刪除指定的遠(yuǎn)程倉(cāng)庫(kù)信息 > git remote remove 名稱 > > # 修改遠(yuǎn)程倉(cāng)庫(kù)地址信息 > git remote set-url 遠(yuǎn)程倉(cāng)庫(kù)地址名稱 新地址 > ```## 調(diào)整初始目錄結(jié)構(gòu)這里主要就是下面的兩個(gè)工作：- 刪除初始化的默認(rèn)文件 - 新增調(diào)整我們需要的目錄結(jié)構(gòu)1、將 `App.vue` 修改為：```html <template><div id="app"><h1>黑馬頭條內(nèi)容發(fā)布系統(tǒng)</h1><!-- 路由出口 --><router-view/></div> </template><script> export default {name: 'App' } </script><style lang="less"></style>```2、將 `router/index.js` 修改為：```javascript import Vue from 'vue' import VueRouter from 'vue-router'Vue.use(VueRouter)// 路由配置表 const routes = []const router = new VueRouter({routes })export default router```3、刪除默認(rèn)生成的不相關(guān)文件：- src/views/About.vue - src/views/Home.vue - src/components/HelloWorld.vue - src/assets/logo.png4、增加以下幾個(gè)目錄- src/api 目錄- 存儲(chǔ)接口模塊 - src/utils 目錄- 存儲(chǔ)一些工具模塊 - src/styles 目錄- index.less 文件，設(shè)置全局樣式- 在 `main.js` 中加載全局樣式 `import './styles/index.less'`調(diào)整之后的目錄結(jié)構(gòu)如下。``` . ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src ├── api├── App.vue ├── assets ├── components ├── main.js ├── router├── utils├── styles └── views ```## JavaScript 代碼規(guī)范### 什么是編碼規(guī)范### 如何統(tǒng)一編碼規(guī)范ESLint。### 流行的編碼規(guī)范- Airbnb JavaScript Style- 非常嚴(yán)謹(jǐn)，規(guī)則特別多- JavaScript Standard Style- 相比 Airbnb JavaScript Style 要寬松一些。我們項(xiàng)目中使用的是 [JavaScript Standard Style](https://standardjs.com/readme-zhcn.html) 代碼風(fēng)格。下面是它的一些具體規(guī)則要求：### JavaScript Standard Style 規(guī)范說明建議把：https://standardjs.com/rules-zhcn.html 看一遍，然后在寫的時(shí)候遇到錯(cuò)誤就查詢解決。- **使用兩個(gè)空格** – 進(jìn)行縮進(jìn)- **字符串使用單引號(hào)** – 需要轉(zhuǎn)義的地方除外- **不再有冗余的變量** – 這是導(dǎo)致 _大量_ bug 的源頭!- **無分號(hào)** – [這](http://blog.izs.me/post/2353458699/an-open-letter-to-javascript-leaders-regarding)[沒什么不好。](http://inimino.org/~inimino/blog/javascript_semicolons)[不騙你！](https://www.youtube.com/watch?v=gsfbh17Ax9I)- 行首不要以 `(`, `[`, or ``` 開頭- 這是省略分號(hào)時(shí)**唯一**會(huì)造成問題的地方 – _工具里已加了自動(dòng)檢測(cè)！_- [詳情](https://standardjs.com/rules-zhcn.html#semicolons)- **關(guān)鍵字后加空格** `if (condition) { ... }`- **函數(shù)名后加空格** `function name (arg) { ... }`- 堅(jiān)持使用全等 `===` 摒棄 `==` 一但在需要檢查 `null || undefined` 時(shí)可以使用 `obj == null`。- 一定要處理 Node.js 中錯(cuò)誤回調(diào)傳遞進(jìn)來的 `err` 參數(shù)。- 使用瀏覽器全局變量時(shí)加上 `window` 前綴- document 和 navigator 除外- 避免無意中使用到了這些命名看上去很普通的全局變量， `open`, `length`, `event` 還有 `name`。- **查看更多** – _為何不試試 standard 規(guī)范呢！_說了那么多，看看[這個(gè)遵循了 Standard 規(guī)范的示例文件](https://github.com/expressjs/body-parser/blob/master/index.js) 中的代碼吧。或者，這里還有[一大波使用了此規(guī)范的項(xiàng)目](https://raw.githubusercontent.com/standard/standard-packages/master/all.json) 代碼可供參考。### 如何解決代碼規(guī)范錯(cuò)誤<img src="assets/image-20200420112418029.png" alt="image-20200420112418029" style="zoom:50%;" />如果你不認(rèn)識(shí)命令行中的語法報(bào)錯(cuò)是什么意思，你可以根據(jù)錯(cuò)誤代號(hào)去 ESLint 規(guī)則列表中查找其具體含義。什么是錯(cuò)誤代號(hào)？<img src="./assets/1561024746437.png" alt="1561024746437" style="zoom:50%;" />> 括號(hào)中的就是錯(cuò)誤代碼。 > > semi > > keyword-spacing > > space-before-function-paren打開 [ESLint 規(guī)則表](https://cn.eslint.org/docs/rules/)，使用頁(yè)面搜索（Ctrl + F）這個(gè)代碼，查找對(duì)該規(guī)則的一個(gè)釋義。<img src="./assets/1561024887156.png" alt="1561024887156" style="zoom:50%;" />> 例如我通過頁(yè)面頁(yè)面查找 `space-before-function-paren` 規(guī)則代號(hào)的釋義。### 關(guān)于 Vue.js 代碼規(guī)范> 非強(qiáng)制要求，但是建議按照一定格式來寫。參考：[官方風(fēng)格指南](https://cn.vuejs.org/v2/style-guide/)。## Element 組件庫(kù)### Element 介紹Element 是餓了么前端團(tuán)隊(duì)開發(fā)的一個(gè)基于 Vue.js 的桌面端組件庫(kù)，它提供的組件非常豐富，不僅功能強(qiáng)大，而且簡(jiǎn)單易用。Element 非常的流行，大多數(shù)基于 Vue.js 開發(fā)的管理系統(tǒng)都會(huì)使用到它。- 官網(wǎng)：https://element.eleme.io/ - GitHub 倉(cāng)庫(kù)：https://github.com/ElemeFE/element- 目前已有 44.8k 的 Star 了### 導(dǎo)入到項(xiàng)目中1、安裝```bash npm i element-ui ```2、在 `main.js` 中配置 element 組件庫(kù)```js /*** 項(xiàng)目的啟動(dòng)入口*/import Vue from 'vue' import App from './App.vue' import router from './router'// 加載 element 組件庫(kù) import ElementUI from 'element-ui'// 加載 element 組件庫(kù)的樣式 import 'element-ui/lib/theme-chalk/index.css'// 加載全局樣式文件 import './styles/index.less'// 全局注冊(cè) element 組件庫(kù) Vue.use(ElementUI)Vue.config.productionTip = false// 創(chuàng)建 Vue 根實(shí)例 // 把 router 配置到根實(shí)例中 // 通過 render 方法把 App 根組件渲染到 #app 入口節(jié)點(diǎn) new Vue({router,render: h => h(App)// el: '#app' // 等價(jià)于 $mount('#app') }).$mount('#app')```### 使用說明用哪個(gè)組件就看哪個(gè)組件的說明文檔。復(fù)制 -> 粘貼 -> try-try-see。## 封裝請(qǐng)求模塊為了方便，我們?cè)谶@里把 axios 單獨(dú)封裝一個(gè)模塊用于項(xiàng)目中的請(qǐng)求操作。```js /*** 基于 axios 封裝的請(qǐng)求模塊*/ import axios from 'axios'// axios() // axios.get() // axios.post()// 創(chuàng)建一個(gè) axios 實(shí)例，說白了就是復(fù)制了一個(gè) axios // 我們通過這個(gè)實(shí)例去發(fā)請(qǐng)求，把需要的配置配置給這個(gè)實(shí)例來處理 const request = axios.create({baseURL: 'http://ttapi.research.itcast.cn/' // 請(qǐng)求的基礎(chǔ)路徑 })// 請(qǐng)求攔截器// 響應(yīng)攔截器// 導(dǎo)出請(qǐng)求方法 export default request// 誰要使用誰就加載 request 模塊 // import request from 'request.js' // request.xxx // request({ // method: , // url: '' // })```

總結(jié)

以上是生活随笔為你收集整理的前端学习（2398）：回顾的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。