從壹開始前后端分離 [ Vue2.0+.NET Core2.1] 二十一║Vue實戰:開發環境搭建【詳細版】


緣起

 哈嘍大家好,兜兜轉轉終於來到了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/ 

      國內 http://nodejs.cn/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了,下次咱們就開始正式搭建項目啦,再見咯~~~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM