記自己一次vue基礎實戰：配置篇

SmallBoyO 發布于2019-08-26 10:16 / 2951人閱讀

摘要：前言記錄自己從基礎學習實戰，初入發表文章，望各位大佬口下留情不對之處還請大佬指點一下。在加載完后，你自己默認的瀏覽器自動打開配置界面新建項目。

1. 前言

記錄自己從基礎學習vue實戰，初入發表文章，望各位大佬口下留情！不對之處還請大佬指點一下。

2. 新建，配置項目

1. 新建Vue-cli3.0腳手架的項目

在這里普及一下，什么是Vue-cli？

Vue是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是， Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。 另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。鏈接描述

上面引用的鏈接已經很好說明一切了，這里我就不一一詳細說明怎么安裝node.js和npm了，我就說明一下我自己的基礎開發流程：

1.1 使用Vue ui
我使用的是Vscode編輯器，可以在編輯器終端使用快捷鍵Ctrl + ·，可以快速打開，輸入Vue ui。在加載完后，你自己默認的瀏覽器自動打開配置界面新建項目。以下是我今天的配置：

在詳情上新建項目名；選擇包管理器，我這里選擇是npm，因為當然是用的比較熟悉了；其余的默認操作；下一步；

預設（Presets），默認使用官方提供好的插件和配置，內心感覺不太妙還是謹慎一下手動配置；下一步；

功能（Features），手動添加插件：
一.（Babel）可以把ES6/7語法兼容或者換成ES5更加適合低版瀏覽器的版本，使開發者無需考慮瀏覽器的支持問題，隨便使用新語法；
二.（Router）路由，必須滴；
三.（Vuex）狀態管理，大型項目可以提現它的重要性，小項目也是可以用的，反正不虧；
四.（CSS Pre-processors）css預處理，可以為css添加一些編碼的特性；
五.（Linter/Formatter）編寫代碼風格提示，及時糾正你的小毛病；
六.（Use config files）使用配置文件

配置（Configuration）選擇預處理器，看個人平時習慣，這里我選（Eslint+standard config）

上述配置，回到Vscode,終端輸入npm run serve,就開始你的奇妙之旅了。

3. 項目配置

回到項目的我們可以看一下依賴包，生成好的項目

上面的文件依次是

依賴包（node-modules），這就不用多說了吧，安裝的依賴都在這里面，有興趣后面會對里面的源碼進行更深層次的解讀。

公共文件夾（public）里面是vue的圖標加首頁的html

src目錄重頭戲(我一般有以下文件)
1.api接口文檔，與后端進行數據交互；
2.assets項目資源主要（img）圖片、（font）字體等等靜態資源存放在這里；
3.components組件及一些復用組件；
4.config主要是根據模塊系統導出配置對象；
5.directive自定義指令，可以寫自己定義好的函數使用
6.lib與實戰開發相關或者與實戰不相關工具函數都在放在這里
7.mock模擬數據，在沒有與后端正式對接的時候，可以模擬數據，方便到時候與后端開發時修改數據傳輸格式
8.router路由，跳轉路由頁面都要在這里注冊，后面會講到把一部分抽離出來，就是權限那一塊
9.store狀態管理，vuex的state、mutations、actions、getters等等都在這里，后面會詳細介紹
10.views視圖，頁面主要展示和組件組合使用的文件
11.App.vue起始頁面，通過路由跳轉個個頁面
12.main.js全局文件，在這導入的文件可以去全局使用import

.editorconfig 用來協同不同開發人員、編輯器、代碼風格、樣式規格化定義和維護一致的編碼樣式

.eslintrc.js 語法檢測配置

postcss.config.js 將px轉化為rem

vue.config.js 開發總配置：

// 定義一個方法
const path = require("path")
// 主要是方便導入名簡寫，這里使用es6的箭頭函數
const resolve = dir => path.join(__dirname, dir)
// 開發環境配置 "/"指定域名的根目錄下，如果是開發環境寫‘/xxxx/’即可
const BASE_URL = process.env.NODE_ENV === "procution" ? "/xxxx/" : "/"
module.exports = {
  // 取消每一次保存編譯
  lintOnSave: false,
  // 項目基本路徑
  baseUrl: BASE_URL,
  // 方便開發的配置
  chainWebpack: config => {
    // webpack目錄別名配置
    config.resolve.alias
      // 導入時以@可以代替src，拼接路徑
      .set("@", resolve("src"))
      // 上同
      .set("_c", resolve("src/components"))
  },
  // 打包時不生成.map文件，減少打包文件
  productionSourceMap: false,
  // 跨域問題
  devServer: {
    proxy: "http://localhost:4000"
  }
}

4. 結語

拖了好久沒寫，第一次自己組織語言有點不好，語言不同通順的地方望多多指點，就當自己練習。
下一節講解路由基礎，看有沒有時間寫了，希望給萌新點個贊!

GPU云服務器云服務器實戰篇基礎篇之基礎篇 java語言程序設計基礎篇

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105886.html

記自己一次vue基礎實戰：配置篇

摘要：前言記錄自己從基礎學習實戰，初入發表文章，望各位大佬口下留情不對之處還請大佬指點一下。在加載完后，你自己默認的瀏覽器自動打開配置界面新建項目。 1. 前言記錄自己從基礎學習vue實戰，初入發表文章，望各位大佬口下留情！不對之處還請大佬指點一下。 2. 新建，配置項目 1. 新建Vue-cli3.0腳手架的項目在這里普及一下，什么是Vue-cli？ Vue是一套用于構建用戶界面的漸...

NoraXie 2019-08-02 15:34 評論0 收藏0
前端最強面經匯總

摘要：獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼，也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據我測試不同環境結果可能有差異而就是。花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點個贊，點個star再走哈~ 持續更新中……，可以關注下github 項目地址 https:...

wangjuntytl 2019-08-26 10:41 評論0 收藏0
架構師之路

摘要：因為用戶不用在第一次進入應用時下載所有代碼，用戶能更快的看到頁面并與之交互。譯高階函數利用和來編寫更易維護的代碼高階函數可以幫助你增強你的，讓你的代碼更具有聲明性。知道什么時候和怎樣使用高階函數是至關重要的。 Vue 折騰記 - (10) 給axios做個挺靠譜的封裝(報錯,鑒權,跳轉,攔截,提示) 稍微改改都能直接拿來用~~~喲吼吼,喲吼吼..... 如何無痛降低 if else 面...

NikoManiac 2019-08-22 11:22 評論0 收藏0
正則系列——JavaScript正則表達式基礎語法鞏固篇

摘要：基礎語法鞏固正則表達式引擎根據正則去匹配字符的時候，是通過檢查索引的方式。妻原配就是好，可以直接使用正則表達式調用它。下面解釋一下上面這些常用的元字符查找單個字符，除了換行和行結束符。正則系列文章整理到了上一章內容：正則表達式實戰篇知識回顧前2章分別學習了正則表達式入門技巧，以及遇到正則需求該如何去分析問題，還有正則表達式實戰的一些場景解釋。這一章內容偏向理論，推薦你點擊開頭的...

phodal 2019-08-22 11:09 評論0 收藏0