成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

記自己一次vue基礎(chǔ)實(shí)戰(zhàn)：配置篇

SmallBoyO / 2963人閱讀

摘要：前言記錄自己從基礎(chǔ)學(xué)習(xí)實(shí)戰(zhàn)，初入發(fā)表文章，望各位大佬口下留情不對(duì)之處還請(qǐng)大佬指點(diǎn)一下。在加載完后，你自己默認(rèn)的瀏覽器自動(dòng)打開配置界面新建項(xiàng)目。

1. 前言

記錄自己從基礎(chǔ)學(xué)習(xí)vue實(shí)戰(zhàn)，初入發(fā)表文章，望各位大佬口下留情！不對(duì)之處還請(qǐng)大佬指點(diǎn)一下。

2. 新建，配置項(xiàng)目

1. 新建Vue-cli3.0腳手架的項(xiàng)目

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

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是， Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。 另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)。鏈接描述

上面引用的鏈接已經(jīng)很好說明一切了，這里我就不一一詳細(xì)說明怎么安裝node.js和npm了，我就說明一下我自己的基礎(chǔ)開發(fā)流程：

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

在詳情上新建項(xiàng)目名；選擇包管理器，我這里選擇是npm，因?yàn)楫?dāng)然是用的比較熟悉了；其余的默認(rèn)操作；下一步；

預(yù)設(shè)（Presets），默認(rèn)使用官方提供好的插件和配置，內(nèi)心感覺不太妙還是謹(jǐn)慎一下手動(dòng)配置；下一步；

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

配置（Configuration）選擇預(yù)處理器，看個(gè)人平時(shí)習(xí)慣，這里我選（Eslint+standard config）

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

3. 項(xiàng)目配置

回到項(xiàng)目的我們可以看一下依賴包，生成好的項(xiàng)目


上面的文件依次是

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

公共文件夾（public）里面是vue的圖標(biāo)加首頁的html

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

.editorconfig 用來協(xié)同不同開發(fā)人員、編輯器、代碼風(fēng)格、樣式規(guī)格化定義和維護(hù)一致的編碼樣式

.eslintrc.js 語法檢測(cè)配置

postcss.config.js 將px轉(zhuǎn)化為rem

vue.config.js 開發(fā)總配置：

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

拖了好久沒寫，第一次自己組織語言有點(diǎn)不好，語言不同通順的地方望多多指點(diǎn)，就當(dāng)自己練習(xí)。
下一節(jié)講解路由基礎(chǔ)，看有沒有時(shí)間寫了，希望給萌新點(diǎn)個(gè)贊!

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105886.html

相關(guān)文章

  • 記自己一次vue基礎(chǔ)實(shí)戰(zhàn)：配置篇

    摘要：前言記錄自己從基礎(chǔ)學(xué)習(xí)實(shí)戰(zhàn)，初入發(fā)表文章，望各位大佬口下留情不對(duì)之處還請(qǐng)大佬指點(diǎn)一下。在加載完后，你自己默認(rèn)的瀏覽器自動(dòng)打開配置界面新建項(xiàng)目。 1. 前言 記錄自己從基礎(chǔ)學(xué)習(xí)vue實(shí)戰(zhàn)，初入發(fā)表文章，望各位大佬口下留情！不對(duì)之處還請(qǐng)大佬指點(diǎn)一下。 2. 新建，配置項(xiàng)目 1. 新建Vue-cli3.0腳手架的項(xiàng)目 在這里普及一下，什么是Vue-cli？ Vue是一套用于構(gòu)建用戶界面的漸...

    NoraXie 評(píng)論0 收藏0

  • 前端最強(qiáng)面經(jīng)匯總

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

    wangjuntytl 評(píng)論0 收藏0

  • 架構(gòu)師之路

    摘要：因?yàn)橛脩舨挥迷诘谝淮芜M(jìn)入應(yīng)用時(shí)下載所有代碼，用戶能更快的看到頁面并與之交互。譯高階函數(shù)利用和來編寫更易維護(hù)的代碼高階函數(shù)可以幫助你增強(qiáng)你的，讓你的代碼更具有聲明性。知道什么時(shí)候和怎樣使用高階函數(shù)是至關(guān)重要的。 Vue 折騰記 - (10) 給axios做個(gè)挺靠譜的封裝(報(bào)錯(cuò),鑒權(quán),跳轉(zhuǎn),攔截,提示) 稍微改改都能直接拿來用~~~喲吼吼,喲吼吼..... 如何無痛降低 if else 面...

    NikoManiac 評(píng)論0 收藏0

  • 正則系列——JavaScript正則表達(dá)式基礎(chǔ)語法鞏固篇

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

    phodal 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<