# 一、項目初始化## 使用 Vue CLI 創建項目> 注意：不要使用 Git Bash 執行項目創建操作，使用 cmd 或者 powershell 之類的工具。> 如果你還沒有安裝 VueCLI，或者版本低于 4，請執行下面的命令安裝或是升級： > > ```shell > npm install --global @vue/cli > ```在命令行中輸入以下命令創建 Vue 項目： ```shell vue create toutiao-publish-admin ``````shell Vue CLI v4.2.3 ? Please pick a preset:default (babel, eslint) > Manually select features ``` > default：默認勾選 babel、eslint，回車之后直接進入裝包 > > manually：自定義勾選特性配置，選擇完畢之后，才會進入裝包 > > 選擇第 2 種：手動選擇特性，支持更多自定義選項```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 轉 es5 > Router：路由 > CSS Pre-processors：CSS 預處理器，后面會提示你選擇 less、sass、stylus 等 > Linter / Formatter：代碼格式校驗，ESLint 代碼格式校驗```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 預處理器，這里選擇我們熟悉的 Less```shell ? Pick a linter / formatter config:ESLint with error prevention onlyESLint + Airbnb config > ESLint + Standard configESLint + Prettier ``` > 選擇校驗工具，這里選擇 ESLint + [Standard config](https://standardjs.com/)```shell ? Pick additional lint features:(*) Lint on save >(*) Lint and fix on commit ``` > 選擇在什么時機下觸發代碼格式校驗： > - Lint on save：每當保存文件的時候 > - Lint and fix on commit：每當執行 `git commit` 提交的時候 > > 這里建議兩個都選上，更嚴謹。```shell ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) > In dedicated config filesIn package.json ``` > Babel、ESLint 等工具會有一些額外的配置文件，這里的意思是問你將這些工具相關的配置文件寫到哪里： > - In dedicated config files：分別保存到單獨的配置文件 > - In package.json：保存到 package.json 文件中 > > 這里建議選擇第 1 個，保存到單獨的配置文件，這樣方便我們做自定義配置。```shell ? Save this as a preset for future projects? (y/N) N ``` > 這里里是問你是否需要將剛才選擇的一系列配置保存起來，然后它可以幫你記住上面的一系列選擇，以便下次直接重用。> 這里根據自己需要輸入 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 ``` > 向導配置結束，開始裝包。 > 安裝包的時間可能較長，請耐心等待......```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 ``` 安裝結束，命令提示你項目創建成功，按照命令行的提示在終端中分別輸入：```shell # 進入你的項目目錄 cd toutiao-webapp# 啟動開發服務 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. ``` > 啟動成功，命令行中輸出項目的 http 訪問地址。 > 打開瀏覽器，輸入其中任何一個地址進行訪問。如果能看到該頁面，恭喜你，項目創建成功了。## 初始目錄結構說明## 加入 Git 版本管理建議在項目的一開始就加入版本管理，通過版本管理，我們可以得到很多好處，例如：- 代碼備份 - 多人協作 - 歷史記錄 - ....下面是具體的操作流程。（1）創建遠程倉庫（GitHub、Gitee、coding）。。。。（2）把本地倉庫推送到遠程倉庫如果沒有本地倉庫：```shell # 初始化本地倉庫 git init# 把文件添加到暫存區 git add README.md# 把暫存區文件提交到本地倉庫形成歷史記錄 git commit -m "first commit"# 添加遠端倉庫地址到本地倉庫 git remote add origin https://github.com/lipengzhou/toutiao-publish-admin.git# 推送到遠程倉庫 git push -u origin master ```如果已有本地倉庫> VueCLI 在創建項目的時候自動幫你初始化了 `Git` 倉庫，并且基于初始代碼默認執行了一次提交。```shell git remote add origin https://github.com/lipengzhou/toutiao-publish-admin.git# -u 就是記住本次推送的信息，下次就不用寫推送信息了，可以直接 git push git push -u origin master ```（3）之后如果有代碼變動需要提交```shell git add git commit# 推送到遠程倉庫 # 推送的時候如果不改變遠程倉庫和分支的話就直接 git push# 如果推送的遠程倉庫或是分支改變了 $ git push -u 遠程倉庫 分支名稱 ```> 擴展：管理遠程倉庫地址信息 > > ```shell > # 查看使用幫助 > git remote --help > > # 查看所有的遠程倉庫信息 > git remote -v > > # 添加遠程倉庫地址信息 > git remote add 名稱 遠程倉庫地址 > > # 刪除指定的遠程倉庫信息 > git remote remove 名稱 > > # 修改遠程倉庫地址信息 > git remote set-url 遠程倉庫地址名稱 新地址 > ```## 調整初始目錄結構這里主要就是下面的兩個工作：- 刪除初始化的默認文件 - 新增調整我們需要的目錄結構1、將 `App.vue` 修改為：```html <template><div id="app"><h1>黑馬頭條內容發布系統</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、刪除默認生成的不相關文件：- src/views/About.vue - src/views/Home.vue - src/components/HelloWorld.vue - src/assets/logo.png4、增加以下幾個目錄- src/api 目錄- 存儲接口模塊 - src/utils 目錄- 存儲一些工具模塊 - src/styles 目錄- index.less 文件，設置全局樣式- 在 `main.js` 中加載全局樣式 `import './styles/index.less'`調整之后的目錄結構如下。``` . ├── 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 代碼規范### 什么是編碼規范### 如何統一編碼規范ESLint。### 流行的編碼規范- Airbnb JavaScript Style- 非常嚴謹，規則特別多- JavaScript Standard Style- 相比 Airbnb JavaScript Style 要寬松一些。我們項目中使用的是 [JavaScript Standard Style](https://standardjs.com/readme-zhcn.html) 代碼風格。下面是它的一些具體規則要求：### JavaScript Standard Style 規范說明建議把：https://standardjs.com/rules-zhcn.html 看一遍，然后在寫的時候遇到錯誤就查詢解決。- **使用兩個空格** – 進行縮進- **字符串使用單引號** – 需要轉義的地方除外- **不再有冗余的變量** – 這是導致 _大量_ bug 的源頭!- **無分號** – [這](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 ``` 開頭- 這是省略分號時**唯一**會造成問題的地方 – _工具里已加了自動檢測！_- [詳情](https://standardjs.com/rules-zhcn.html#semicolons)- **關鍵字后加空格** `if (condition) { ... }`- **函數名后加空格** `function name (arg) { ... }`- 堅持使用全等 `===` 摒棄 `==` 一但在需要檢查 `null || undefined` 時可以使用 `obj == null`。- 一定要處理 Node.js 中錯誤回調傳遞進來的 `err` 參數。- 使用瀏覽器全局變量時加上 `window` 前綴- document 和 navigator 除外- 避免無意中使用到了這些命名看上去很普通的全局變量， `open`, `length`, `event` 還有 `name`。- **查看更多** – _為何不試試 standard 規范呢！_說了那么多，看看[這個遵循了 Standard 規范的示例文件](https://github.com/expressjs/body-parser/blob/master/index.js) 中的代碼吧。或者，這里還有[一大波使用了此規范的項目](https://raw.githubusercontent.com/standard/standard-packages/master/all.json) 代碼可供參考。### 如何解決代碼規范錯誤<img src="assets/image-20200420112418029.png" alt="image-20200420112418029" style="zoom:50%;" />如果你不認識命令行中的語法報錯是什么意思，你可以根據錯誤代號去 ESLint 規則列表中查找其具體含義。什么是錯誤代號？<img src="./assets/1561024746437.png" alt="1561024746437" style="zoom:50%;" />> 括號中的就是錯誤代碼。 > > semi > > keyword-spacing > > space-before-function-paren打開 [ESLint 規則表](https://cn.eslint.org/docs/rules/)，使用頁面搜索（Ctrl + F）這個代碼，查找對該規則的一個釋義。<img src="./assets/1561024887156.png" alt="1561024887156" style="zoom:50%;" />> 例如我通過頁面頁面查找 `space-before-function-paren` 規則代號的釋義。### 關于 Vue.js 代碼規范> 非強制要求，但是建議按照一定格式來寫。參考：[官方風格指南](https://cn.vuejs.org/v2/style-guide/)。## Element 組件庫### Element 介紹Element 是餓了么前端團隊開發的一個基于 Vue.js 的桌面端組件庫，它提供的組件非常豐富，不僅功能強大，而且簡單易用。Element 非常的流行，大多數基于 Vue.js 開發的管理系統都會使用到它。- 官網：https://element.eleme.io/ - GitHub 倉庫：https://github.com/ElemeFE/element- 目前已有 44.8k 的 Star 了### 導入到項目中1、安裝```bash npm i element-ui ```2、在 `main.js` 中配置 element 組件庫```js /*** 項目的啟動入口*/import Vue from 'vue' import App from './App.vue' import router from './router'// 加載 element 組件庫 import ElementUI from 'element-ui'// 加載 element 組件庫的樣式 import 'element-ui/lib/theme-chalk/index.css'// 加載全局樣式文件 import './styles/index.less'// 全局注冊 element 組件庫 Vue.use(ElementUI)Vue.config.productionTip = false// 創建 Vue 根實例 // 把 router 配置到根實例中 // 通過 render 方法把 App 根組件渲染到 #app 入口節點 new Vue({router,render: h => h(App)// el: '#app' // 等價于 $mount('#app') }).$mount('#app')```### 使用說明用哪個組件就看哪個組件的說明文檔。復制 -> 粘貼 -> try-try-see。## 封裝請求模塊為了方便，我們在這里把 axios 單獨封裝一個模塊用于項目中的請求操作。```js /*** 基于 axios 封裝的請求模塊*/ import axios from 'axios'// axios() // axios.get() // axios.post()// 創建一個 axios 實例，說白了就是復制了一個 axios // 我們通過這個實例去發請求，把需要的配置配置給這個實例來處理 const request = axios.create({baseURL: 'http://ttapi.research.itcast.cn/' // 請求的基礎路徑 })// 請求攔截器// 響應攔截器// 導出請求方法 export default request// 誰要使用誰就加載 request 模塊 // import request from 'request.js' // request.xxx // request({ // method: , // url: '' // })```

?

總結

以上是生活随笔為你收集整理的前端学习（2453）：项目初始化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。