資訊專欄INFORMATION COLUMN
摘要：前言記錄自己從基礎(chǔ)學(xué)習(xí)實戰(zhàn)，初入發(fā)表文章，望各位大佬口下留情不對之處還請大佬指點一下。在加載完后，你自己默認的瀏覽器自動打開配置界面新建項目。
1. 前言
記錄自己從基礎(chǔ)學(xué)習(xí)vue實戰(zhàn)，初入發(fā)表文章，望各位大佬口下留情！不對之處還請大佬指點一下。
2. 新建，配置項目1. 新建Vue-cli3.0腳手架的項目
在這里普及一下，什么是Vue-cli？
Vue是一套用于構(gòu)建用戶界面的漸進式框架。與其它大型框架不同的是， Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。 另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。鏈接描述
上面引用的鏈接已經(jīng)很好說明一切了，這里我就不一一詳細說明怎么安裝node.js和npm了，我就說明一下我自己的基礎(chǔ)開發(fā)流程：
1.1 使用Vue ui
我使用的是Vscode編輯器，可以在編輯器終端使用快捷鍵Ctrl + ·，可以快速打開，輸入Vue ui。在加載完后，你自己默認的瀏覽器自動打開配置界面新建項目。以下是我今天的配置：
在詳情上新建項目名；選擇包管理器，我這里選擇是npm，因為當(dāng)然是用的比較熟悉了；其余的默認操作；下一步；
預(yù)設(shè)（Presets），默認使用官方提供好的插件和配置，內(nèi)心感覺不太妙還是謹慎一下手動配置；下一步；
功能（Features），手動添加插件：
一.（Babel）可以把ES6/7語法兼容或者換成ES5更加適合低版瀏覽器的版本，使開發(fā)者無需考慮瀏覽器的支持問題，隨便使用新語法；
二.（Router）路由，必須滴；
三.（Vuex）狀態(tài)管理，大型項目可以提現(xiàn)它的重要性，小項目也是可以用的，反正不虧；
四.（CSS Pre-processors）css預(yù)處理，可以為css添加一些編碼的特性；
五.（Linter/Formatter）編寫代碼風(fēng)格提示，及時糾正你的小毛?。?br>六.（Use config files）使用配置文件
配置（Configuration）選擇預(yù)處理器，看個人平時習(xí)慣，這里我選（Eslint+standard config）
上述配置，回到Vscode,終端輸入npm run serve,就開始你的奇妙之旅了。
3. 項目配置回到項目的我們可以看一下依賴包，生成好的項目
上面的文件依次是
依賴包（node-modules），這就不用多說了吧，安裝的依賴都在這里面，有興趣后面會對里面的源碼進行更深層次的解讀。
公共文件夾（public）里面是vue的圖標加首頁的html
src目錄重頭戲(我一般有以下文件)
1.api接口文檔，與后端進行數(shù)據(jù)交互；
2.assets項目資源主要（img）圖片、（font）字體等等靜態(tài)資源存放在這里；
3.components組件及一些復(fù)用組件；
4.config主要是根據(jù)模塊系統(tǒng)導(dǎo)出配置對象；
5.directive自定義指令，可以寫自己定義好的函數(shù)使用
6.lib與實戰(zhàn)開發(fā)相關(guān)或者與實戰(zhàn)不相關(guān)工具函數(shù)都在放在這里
7.mock模擬數(shù)據(jù)，在沒有與后端正式對接的時候，可以模擬數(shù)據(jù)，方便到時候與后端開發(fā)時修改數(shù)據(jù)傳輸格式
8.router路由，跳轉(zhuǎn)路由頁面都要在這里注冊，后面會講到把一部分抽離出來，就是權(quán)限那一塊
9.store狀態(tài)管理，vuex的state、mutations、actions、getters等等都在這里，后面會詳細介紹
10.views視圖，頁面主要展示和組件組合使用的文件
11.App.vue起始頁面，通過路由
12.main.js全局文件，在這導(dǎo)入的文件可以去全局使用import
.editorconfig 用來協(xié)同不同開發(fā)人員、編輯器、代碼風(fēng)格、樣式規(guī)格化定義和維護一致的編碼樣式
.eslintrc.js 語法檢測配置
postcss.config.js 將px轉(zhuǎn)化為rem
vue.config.js 開發(fā)總配置：
// 定義一個方法
const path = require("path")
// 主要是方便導(dǎo)入名簡寫，這里使用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,
// 項目基本路徑
baseUrl: BASE_URL,
// 方便開發(fā)的配置
chainWebpack: config => {
// webpack目錄別名配置
config.resolve.alias
// 導(dǎo)入時以@可以代替src，拼接路徑
.set("@", resolve("src"))
// 上同
.set("_c", resolve("src/components"))
},
// 打包時不生成.map文件，減少打包文件
productionSourceMap: false,
// 跨域問題
devServer: {
proxy: "http://localhost:4000"
}
}
4. 結(jié)語
拖了好久沒寫，第一次自己組織語言有點不好，語言不同通順的地方望多多指點，就當(dāng)自己練習(xí)。
下一節(jié)講解路由基礎(chǔ)，看有沒有時間寫了，希望給萌新點個贊!
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/54219.html
摘要：前言記錄自己從基礎(chǔ)學(xué)習(xí)實戰(zhàn)，初入發(fā)表文章，望各位大佬口下留情不對之處還請大佬指點一下。在加載完后，你自己默認的瀏覽器自動打開配置界面新建項目。 1. 前言 記錄自己從基礎(chǔ)學(xué)習(xí)vue實戰(zhàn)，初入發(fā)表文章，望各位大佬口下留情！不對之處還請大佬指點一下。 2. 新建，配置項目 1. 新建Vue-cli3.0腳手架的項目 在這里普及一下，什么是Vue-cli？ Vue是一套用于構(gòu)建用戶界面的漸...
摘要：獲取的對象范圍方法獲取的是最終應(yīng)用在元素上的所有屬性對象即使沒有代碼，也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據(jù)我測試不同環(huán)境結(jié)果可能有差異而就是。 花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點個贊，點個star再走哈~ 持續(xù)更新中……，可以關(guān)注下github 項目地址 https:...
摘要：因為用戶不用在第一次進入應(yīng)用時下載所有代碼，用戶能更快的看到頁面并與之交互。譯高階函數(shù)利用和來編寫更易維護的代碼高階函數(shù)可以幫助你增強你的，讓你的代碼更具有聲明性。知道什么時候和怎樣使用高階函數(shù)是至關(guān)重要的。 Vue 折騰記 - (10) 給axios做個挺靠譜的封裝(報錯,鑒權(quán),跳轉(zhuǎn),攔截,提示) 稍微改改都能直接拿來用~~~喲吼吼,喲吼吼..... 如何無痛降低 if else 面...
摘要：基礎(chǔ)語法鞏固正則表達式引擎根據(jù)正則去匹配字符的時候，是通過檢查索引的方式。妻原配就是好，可以直接使用正則表達式調(diào)用它。下面解釋一下上面這些常用的元字符查找單個字符，除了換行和行結(jié)束符。正則系列文章整理到了 上一章內(nèi)容：正則表達式實戰(zhàn)篇 知識回顧 前2章分別學(xué)習(xí)了正則表達式入門技巧，以及遇到正則需求該如何去分析問題，還有正則表達式實戰(zhàn)的一些場景解釋。 這一章內(nèi)容偏向理論，推薦你點擊開頭的...
閱讀 1527·2021-09-10 11:27
閱讀 2552·2019-08-30 15:53
閱讀 1437·2019-08-30 13:10
閱讀 3044·2019-08-30 11:09
閱讀 1197·2019-08-29 17:23
閱讀 726·2019-08-29 17:05
閱讀 3004·2019-08-29 15:10
閱讀 2408·2019-08-29 13:22
