緣起
哈嘍大家好,兜兜轉轉終於來到了Vue實戰環節,前邊的 6 篇關於Vue基礎文章我剛剛簡單看了看,感覺寫的還是不行呀,不是很系統,所以大家可能看上去比較累,還是得抽時間去潤潤色,修改修改語句和樣式,至少也得對得住粉絲哈,應該給博客園官方提個小建議,要是能允許好友或者其他人修改文章的功能就好了,比如百科和Wiki 那種就挺好哈哈,今天呢,終於到了安裝環境的一章了,網上的栗子和文檔也是很多,本來打算跳過這一章節,但是想想,本系列還是需要這一塊來完善的,這才是整體教程嘛,好啦,廢話不多說,准備好電腦安裝吧!
今天的主要工作就是配置開發環境,不會涉及到代碼,會平面化的鋪開來說,相對來說比較簡單,只是做一個記錄使用,主要呢由以下幾個方面:
A:安裝 IDE —— Webstorm / VSCode / Atom
B:安裝 nodejs 環境
C:安裝 NPM / CNPM
D:安裝 Git
E:安裝 webpack
F:安裝 vue-cli 腳手架
G:創建 blogvue 工程
H:對整體項目文件簡要說明
I :Hello World
好啦,開始今天的表演~~~
零、今天要完成左下角紅色的部分
A、Vue 常見的IDE —— 我是開發工具,干活的都是我
一個好用的工具可以為開始節省太多的時間,增加效率,從而達到事半功倍的作用,作為一個.net 攻城獅,我幾乎每天都泡在 visual studio 里,這個號稱是宇宙級編輯器,當然現在有很多的大神都說開發人員用一個 node++就行,嗯~~~說實話不敢苟同,就比如說今天還着急的寫了幾個頁面,要不是智能提示,真的會慢很多。今天呢,要說的Vue的開發工具,這里就簡單說下三種常見的開發工具,大家都可以試試,根據個人愛好(我詢問了幾個vue開發的朋友,普遍用的是sublime,然后現在好像VSCode 和 Webstrorm的比較多,剩下的就是Atom,本系列用的是WebStorm)。
1、VsCode
安裝地址:https://code.visualstudio.com/Download
推薦優點:1、作為微軟大大的產品,咳咳,還是比較給力,我在微軟工作的時候,看到好多人在為了visual studio開發,甚至一個小組件都精益求精,點贊;
2、首次開始初始化特別快,號稱是最快的,如果電腦比較低配,推薦使用;
3、微軟這兩年在開源道路山越來越給力,所以VsCode當然也是開源的,而且顏值也是可以,至少比Webstorm漂亮一丟丟;
4、尤雨溪大大一年前曾經也是很推薦,不知道現在有沒有變化好好;
5、各種插件隨心安裝,使用量很多,插件很豐富;
6、支持斷點調試debug,也是很嗨;
2、Webstorm
安裝地址:https://www.jetbrains.com/webstorm/download/#section=windows
推薦優點:1、只能代碼補全,針對不同的瀏覽器,還支持基本流行庫JQuery, YUI, Dojo, Prototype, Mootools and Bindows。
2、可以格式化代碼,也可以自定義,作為強迫症的我來說,必須要代碼整齊才是好的代碼哈哈;
3、智能提示,聯想查詢,可以像VS那樣,Ctrl+鼠標點擊,可以跳轉到定義;
4、代碼檢查和修復,可以提示錯誤的所在地點,快速解決;
5、最新版本已經繼承Vode插件,可以界面話啟服務,編譯,打包等等,再也不用寫命令行了;
6、nodejs 最好的開發工具,沒有之一。只要你會用 chrome 調試瀏覽器端的 js,那么你就會用 webstorm 調試 nodejs。
7、簡單易操作的版本控制,只要你簡單的配置下git或svn就可以使用快捷鍵快速的進行版本控制
8、實時保存,不用頻繁的按ctrl+s了
Diss缺點:從上邊的功能也可以看出來,VsCode注重開源,快速和社區,這些Webstorm都木有
1、啟動緩慢,內存占據大(300M+),如果再配上websocket,低配置的筆記本就開始唱歌了[哭笑];
2、是收費滴,真挺貴,只有一個月的免費使用,不過上有政策下有對策,各種序列號,破解等從來沒停過;
3、樣式長的不是很好,雖然有很多主題,屬於注重功能型選手。
3、Atom
安裝地址:https://atom.io/
推薦優點:1、啥都不說,就沖着這個顏值,就得加分哈哈,還有各種主題;
2、Atom是最大的開源網站github出的,基本功能和顏值都在線的,插件的質量還是很高的;
3、強大的社區做后盾,為程序員開發提供福利,特別是前端程序員;
4、當然還有很大的優點,就是開源免費,想用啥都可以;
缺點:1、還是稍微會卡頓的,不過官方正在慢慢優化,相信github也會慢慢加大投入;
總結:嗯。。。不太好說哈,大家可以思考思考,不過可能綜合考慮來說,VsCode可能性價比高,Webstorm功能深,Atom開源顏值美。
B、安裝Nodejs環境 —— 我是運行環境,沒我不行
Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。
Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型,使其輕量又高效。
Node.js 的包管理器 npm,是全球最大的開源庫生態系統。
安裝地址:官網 https://nodejs.org/en/download/
然后就是普通安裝,一步一步 next 即可
安裝成功以后,打開我們的安裝路徑,我們可以看到,除了node,文件夾里還有npm,一起被安裝了
下面咱們會說到 npm,這里咱們先看node是否安裝成功,打開 CMD 命令窗口,輸入 node -v (注意要重啟電腦)
這個時候,能看到node 的版本號,證明我們已經安裝成功了,而且是全局的。
C、安裝 npm / cnpm —— 我是包管理器,想要的都來拿
首先呢,咱不能直接上來就安裝是吧,得明白其中的含義,為啥要安裝,
NPM 名字的由來:Node Package(包) Manager(管理器),從名字看來它是通過 node 的包管理器,嗯大概了解了,那具體來說呢,好像還是不清晰,這個時候咱們說個栗子1,
咱們平時開發c#的時候,需要安裝包,咋安裝的呢,就是通過nuget包管理來安裝,沒錯,npm也是起到了這個作用,只不過是 node 需要用的前端包。如果還是不太清晰,咱們說個前端的栗子2,
平時咱們開始jQuery的時候,需要引用jQuery.js 文件是吧,這一兩個還好,要是多了可咋整,一個個手動添加不方便呀,欸!這個時候就有人想到了辦法,用 JavaScript (運行在 Node.js 上)寫的 npm,來控制已經提交到 遠程倉庫里的包,這些包都是原作者一個個發布上去的,起了一個名,如果咱們使用的時候,只需要再 packbag.json 中,寫上這個名字,嗯!就成功的從遠程 down 下來了,是不是很方便,是不是感覺前端慢慢工程化了!
說了這么多,那到底如何安裝呢,不用慌!上邊咱們也說了,npm 是運行在node.js 上的,所以咱們剛剛安裝 node.js 的時候已經安裝好啦,不信來試試,
在cmd 命令窗口中,輸入 npm -v ,就看到了自己安裝的版本了。
然后就開始用着很開心,但是類,后來發現這個遠程倉庫是在國外的,每次都需要翻牆,有時候一二百兆的文件,需要等好久,更厲害的還卡到了一半,就掛掉了,哎,真是桑心,欸!國外有大神,國內也有老板,沒錯,就是一直專注於開發的阿里攻城獅們,自己根據 npm ,搭建了一個國內的鏡像,基本來說內容都差不多,雖然號稱一直在同步,不過有時候命令還是有些問題,不過基本的都沒啥問題,如果你不能翻牆,如果電腦很卡,沒問題!放心的時候吧,就是 cnpm!那如何安裝呢?
我們剛剛已經成功的安裝了npm了,這時候我們執行下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝完成即可。以后呢,任何 npm 的命令,都可以使用 cnpm 來寫,比如下邊,就是這么簡單!
npm run dev//正規版 cnpm run dev //鏡像版
D、安裝 Git —— 我來簡化cmd操作的,可以不用我
這里要說下為什么安裝 git,因為在以后的開發中,會涉及到各種啟服務呀,發布呀等等,而且都需要進入不同項目的不同文件夾操作,常用的呢是以下三個操作:
1、通過cmd 命令行,進入不同的文件夾,比如:cd D:\Program Files\nodejs ,然后再進入不同的文件夾,萬一哪次沒看好生成錯了,就麻煩,所以我們需要工具。
2、通過 power shell 來執行,不知道這個工具的呢,可以百度下,目前win10自帶都有,使用起來也很簡單,在當前文件夾下,先按下 shift 鍵,然后點擊鼠標右鍵,就彈出來了,
然后執行命令也是可以滴,是不是很方便,當然還可以使用下一種。
3、通過 git 的方法,https://git-scm.com/downloads,然后普通安裝成功后,就能看到上圖中的 Git Bash Here 了,就是直接進入當前文件夾地址,然后就可以隨心的操作了。
總結:通過一定的工具來輔助開發還是很有必要的,安全又可靠。
E、安裝webpack —— 我是打包東西的
還是老規矩,咱們呢,先說說什么是WebPack,這里要說webpack ,那首先就得說說 SPA
1、什么是SPA
這個名字起的,總能讓大家想起來其他的哈哈,言歸正傳,現在的web網站正在慢慢前端化,在vue開篇的時候我也說過了,關於我的開發歷程,來簡單說了下web的發展過程《十四 ║ VUE 計划書 & 我的前后端開發簡史》,總結來說,越來越多的JS,由整頁的刷新,到局部刷新,到現在的SPA(單頁面應用程序)—— 就是整個項目是一個頁面,通過錨點 路由,將全部的組件結合起來,看起來像是多個頁面。所以大家想一下,現在整個web應用程序都融合到了一個頁面里,一個體積龐大的代碼庫就需要好好的控制和組織,不能出現混亂的局面,這個時候為了解決這個問題,就出現了——模塊化編程的思想。
2、傳統前端開發的問題
這個時候如果還是不太清楚,那我們舉個栗子:
大家在開發的時候一定會遇到過這個問題,我的項目是用Bootstrap框架開發的,但是呢,突然領導看上了EasyUI其中的一個組件或者是小插件,這個時候,我們就會直接把EasyUI的樣式給引入進來,
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> //引入了EeayUI樣式 <link rel="stylesheet" type="text/css" href="../resource/js/jquery-easyui-1.5/themes/default/easyui.css"/> <link rel="stylesheet" type="text/css" href="../resource/js/jquery-easyui-1.5/themes/icon.css"/>
這個時候,本來應該很開心的看結果了,發現好多地方都沖突了,額。。尷尬呀,當然正規項目是不能這么開發的,都是自己的前端工程師寫的,這里只是舉一個反面教材,大概就是這個意思,當然還有JS文件的引用,比如這樣
<script src="module111.js"></script> <script src="module222.js"></script> <script src="libraryABC.js"></script> <script src="module333.js"></script>
模塊接口導出到全局對象,即window
對象。模塊的接口可以訪問全局對象的依賴關系,從上邊的問題中可以看出來以下問題
全局沖突
對加載的順序嚴重依賴
開發人員必須人工解決模塊/庫的依賴關系
大型項目,script.js可以很長,難以管理
3、CommonJs: 同步加載 就出現了
這種風格用同步require 的方法去加載一個依賴並用暴露一個接口。 一個模塊可以通過給export
對象添加屬性或給module.exports
設置值 來指定導出。
require("module"); require("../file.js"); exports.doStuff = function() {}; module.exports = someValue;
服務器端node.js用的就是這種標准。 1. 服務器端模塊可以重用 2. 已經有許多模塊用這種風格(npm)。生態圈良好 3. 非常簡單和容易使用。
4、什么是webpack,為什么要使用它
webpack是一個模塊打包器。WebPack可以看做是模塊打包機:它做的事情是,分析你的項目結構,找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言(Scss,TypeScript等),並將其打包為合適的格式以供瀏覽器使用。webpack把模塊(s)連同它的依賴一起打包生成包含這些模塊的靜態資源。現有的模塊打包器不適合大項目(大單頁面應用)程序。代碼分割和靜態資源無縫模塊化的迫切需求,催生了一個新的模塊打包器。 我試圖擴展現有的模塊打包器,但是它沒能實現所有的目標。
1. 把依賴樹切分成塊,實現按需加載。
2. 保持低初始加載時間
3. 每個靜態資源都能是一個模塊
4. 具備把第三方庫集成為模塊的能力
5. 具備打包器每個部分幾乎都能自己定制的特點。
6. 適合大型項目。
安裝:直接執行 npm 命令
npm install webpack -g
這個時候,我們的 webpack 就已經安裝完成啦,以后可以使用了。
F:安裝 vue-cli 腳手架 —— 我是用來創建項目模板的
vue-cli 是vue.js的腳手架,用於自動生成vue.js+webpack的項目模板的,腳手架大家肯定知道,就是一個架子,用來搭建項目的整體基本骨架,有點兒什么意思呢,就比如咱們開發 .net 的時候,咱們其實可以自己一步一步的建 mvc ,但是呢,VS給我們封裝了 MVC框架,我們直接就生成了整體框架,包括基礎包和一些必要文件夾,vue-cli 也是這個作用。
全局安裝:直接輸入 npm 命令
npm install --global vue-cli
安裝完成后,我們輸入 vue -V(這里是大V),看到版本號,就證明安裝成功了,現在已經是 3.0 的腳手架了,生成的文件夾和 2.0 的不一樣,一會兒咱們都會說到。
G:創建 blogvue 工程
1、先說說 2.0 的創建工程的過程
1、進入指定文件夾后,執行
vue init webpack blogvue
2、然后就是一系列選擇的過程
然后就是一直等待就行了,看到完成了。然后進入該項目文件夾,執行 npm run dev,就可以啟動了
就這樣啟動了。
2、然后呢咱們再說下 3.0 的創建工程過程
截至到目前,vue腳手架已經4.0版本了,但是我的教程是3.0的,可能不太一樣,如果你也想安裝3.0的,可以指定安裝版本
npm install -g vue-cli@版本號
如果就想用最新版本的,直接默認安裝吧
首先執行下命令 npm i -g @vue/cli 升級到3.0( 注意管理員權限 )
安裝好后,開始創建我們的項目 vue create project-name
這里有兩個方式:默認方式和手動方式
默認方式就是安裝 babel 和 eslint ,一致 Enter 鍵往下走就是了,因為不需要那么多,所以我就選擇手動了,這里說下,好多人第一次不知道如何進行選擇——使用鍵盤上下鍵來操作,然后 Enter 選中,然后就會出現插件列表,也是用上下鍵,然后用 空格鍵 來選中,下邊有動圖。
選擇要安裝的配置(注意: Linter / Formatter 盡量不要選,會經常報格式不正確警告和報錯,如果無所謂也可以安裝)
特別是在 build 的時候,也會出現報錯,但是只要看到生成 dist 文件夾就行了,不用關注那些 errror 和 warning
下邊是選擇的過程:
這里說下這幾個的意思:
babel:一個javascript轉譯器,將最新版的js語法(es6、es7)轉換為現階段瀏覽器可以兼容的js代碼
typescript:作用有些類似於babel,擁有類型檢查能力和面向對象新特征。
PWA:漸進式WEB應用
Router:路由,設置url,使不同的url顯示不同的頁面
Vuex:作用類似於全局對象,但是並不完全相同。
CSS Pre-processors:css預處理器
Linter / Formatter:代碼規范標准 // 注意:盡量不選
Unit Testing:單元測試
E2E Testing:e2e測試
接下來,選擇css預處理,這里我選擇stylus
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): SCSS/SASS LESS > (*)Stylus
CSS預處理器定義了一種新的語言,其基本思想是,用一種專門的編程語言,為CSS增加了一些編程的特性,將CSS作為目標生成文件,然后開發者就只要使用這種語言進行編碼工作。通俗的說,CSS預處理器用一種專門的編程語言,進行Web頁面樣式設計,然后再編譯成正常的CSS文件,以供項目使用。CSS預處理器為CSS增加一些編程的特性,無需考慮瀏覽器的兼容性問題,例如你可以在CSS中使用變量、簡單的邏輯程序、函數等等在編程語言中的一些基本特性,可以讓你的CSS更加簡潔、適應性更強、可讀性更佳,更易於代碼的維護等諸多好處。
這里說下 stylus :來自於Node.js社區,主要用來給Node項目進行CSS預處理支持,不過在使用人群上不如Sass和LESS。
然后選擇格式化配置
選擇何時檢查代碼規范 —— 保存的時候
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Lint on save ( ) Lint and fix on commit
選擇配置的存放地址
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) > (*)In dedicated config files //獨立文件存放 In package.json// package.json 文件
然后是否將上述配置保存(保存后,下一次將能直接一鍵配置)
Save this as a preset for future projects? (y/N)
下次安裝的時候就是這樣的
接下來就是安裝了,等待中...
3、通過可視化UI頁面創建
我們可以直接通過命令,vue ui 來調取頁面,基本都是一樣的,沒有啥區別,只是更UI化。
具體的大家可以玩玩,這里就不細說了。
H:對整體項目文件簡要說明(整理中)
1、2.0的整體項目構造是這樣的
├── README.md // 項目說明文檔 ├── node_modules // 項目依賴包文件夾 ├── build // 編譯配置文件,一般不用管 │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config // 項目基本設置文件夾 │ ├── dev.env.js // 開發配置文件 │ ├── index.js // 配置主文件 │ └── prod.env.js // 編譯配置文件 ├── index.html // 項目入口文件 ├── package-lock.json // npm5 新增文件,優化性能 ├── package.json // 項目依賴包配置文件 ├── src // 我們的項目的源碼編寫文件 │ ├── App.vue // APP入口文件 │ ├── assets // 初始項目資源目錄,回頭刪掉 │ │ └── logo.png │ ├── components // 組件目錄 │ │ └── Hello.vue // 測試組件,回頭刪除 │ ├── main.js // 主配置文件 │ └── router // 路由配置文件夾 │ └── index.js // 路由配置文件 └── static // 資源放置目錄 └── test // 我們的項目的單元測試文件
2、3.0的整體項目做了很大的調整,沒有了 build 和 config
├── public // 項目公共文件夾 │ └── favicon.ico // 項目配置文件 │ └── index.html // 項目入口文件 ├── src // 我們的項目的源碼編寫文件 │ ├── assets // 基礎樣式存放目錄 │ │ └── logo.png // 基礎圖片文件 │ ├── components // 組件存放目錄 │ │ └── HelloWorld.vue // helloworld組件 │ ├── views // view存放目錄 │ │ ├── About.vue //about 頁面 │ │ └── Home.vue //Home 頁面 │ └── App.vue // App入口文件 │ └── main.js // 主配置文件 │ └── router.js // 路由配置文件 │ └── store.js // Vuex store配置文件 ├── tests // 測試文件夾 │ ├── unit // 單元測試 │ │ ├── .eslintrc // 基礎圖片文件 │ │ └── HelloWorld.spec.js └── babel.config.js // babel 配置文件 └── package.json // 項目依賴包配置文件 └── package-lock.json // npm5 新增文件,優化性能 └── postcss.config.js // └── README.md // 說明文檔
I、結語
好啦,今天的安裝就到這里了,當然還有一些小技巧我還沒有說,終於出現傳說中的Hello World了,下次咱們就開始正式搭建項目啦,再見咯~~~