從script標籤引入到vue-cli開發方式的轉換

前言

vue是一款漸進式的框架，何爲漸進式，個人理解就是能夠根據你的須要來按需引入vue所提供的服務而沒有必定的要求。它不一樣於Angular.js，當你使用Angular.js的時候你就要必須使用它的依賴注入、模塊機制等等。
鑑於vue是一款漸進式的框架，vue-cli開發經驗又較少，一開始選擇了scrip標籤引入的方式進行開發。

script標籤引入開發方式遇到的問題

經過在html頁面中引入下面一行代碼，便可在頁面中使用vue這個框架

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

因爲官方文檔也說了不推薦新手直接使用vue-cli，對於小白來講，script標籤引入的方式仍是很友好的，畢竟這種開發方式不須要使用到Node.js構建工具。
直接在script標籤/js文件中寫入開發時須要使用的代碼，以下圖所示。

可是看完圖片以後你們有發現一個問題嘛~纔剛開始開發代碼的行數已經接近2000行了~正在我開發的如癡如醉的時候我隔壁的同事給了我一個舒適提示：你這代碼後期維護會很麻煩喔！如今都2000行了，之後怎麼辦！（感謝哈哈哈，是你給了我這個轉換的機會）
因爲用這個開發方式是不可使用.vue文件的，所以並不能用.vue文件把一個個組件拆分開來。
好唄~那把它分爲一個個js文件，用script標籤的方式引入，這樣子看起來會舒服一點，維護性也會好一點，起碼不用一次看幾萬行代碼那麼痛苦（本身看還好，若是之後同事接手你的項目，他可能真的要哭了）

這種開發方式貌似沒什麼毛病，雖然沒那麼的高大上但怎麼說仍是能用的。
別別別，別說這麼早，把暫且寫好的程序拿去ie上跑一跑（ie9及以上），哭了，白白的，啥都看不到。ie是不支持es6語法的（箭頭函數啥啥啥的都是不支持的）。而後vue組件裏面的template模塊中常常會使用到··模板字符串的寫法，可是在ie上是不支持的，可是不用模塊字符串來寫的話又特別特別特別的麻煩。本身引入個babel來進行語法的轉換或許是個方法（這個我沒試過）。
總結一下script標籤引入方式的弊端

• 代碼的可維護性差，閱讀體驗不太好
• ie的兼容性問題

總而言之，我以爲組件化工程化的開發方式在這時候就顯得特別的珍貴了，vue-cli存在的意義也就凸顯出來了。在腳手架的開發中，組件化的開發方式使得代碼的可維護性有了大大的提升，工程化的開發方式則幫你處理了不少不少的問題（例如ie的兼容器問題），若是新手使用的是vue官方提供的vue-cli進行項目的搭建，其已經幫咱們把webpack和babel配置好，把程序跑起來就能自動編譯成es5的語法，對於本身來講啥都不用管，省事省心。

vue-cli開發方式

使用這個開發方式須要有一個前提，就是電腦已經安裝了Node.js構建工具。

安裝完Node.js以後在命令行輸入node -v和npm -v能夠安裝相應的版本（在新版的Node.js的安裝過程當中會自動安裝npm包管理工具）
npm是一款包管理工具，可使用它安裝一些第三方的包到本地進行使用。包管理工具除了npm仍是yarn，yarn是新一代的包管理工具，具備很多的優勢，因爲這裏使用的是npm包管理工具，yarn就不作介紹了。

安裝完Node以後，就能夠開始搭建了

一、先安裝vue-cli，在命令行輸入npm install vue-cli -g（-g的意思是全局安裝，這裏採起的方式是全局安裝）
//若是該安裝方式太慢，可使用cnpm淘寶代理的鏡像

安裝成功後再命令行輸入 vue -V（注意V是大寫的）能夠看到當前vue的版本

二、vue-cli安裝完成就可使用它來搭建咱們的項目

• 在存放項目目錄的文件夾的空白處按住shift點擊右鍵，打開當前路徑的命令行窗口

• 在命令行中輸入vue init webpack vue-demo來構建一個vue的項目（vue-demo也是你建立後文件夾的名字）

按下回車後，會彈出不少選項
? Project name (vue-demo) 項目名稱 能夠直接回車 或 填入名稱信息
? Project description (A Vue.js project) 項目描述 能夠直接回車 或 填入描述信息
? Author 做者 可直接回車 或 填入做者信息
? Vue build (Use arrow keys) 直接回車 選擇runtime+compiler
> Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates ......
? Install vue-router? (Y/n) 是否安裝vue路由 y 是
? Use ESLint to lint your code? (Y/n) 是否使用eslint規則 n 否 建議否
? Set up unit tests (Y/n) 是否須要單元測試工具 暫時不須要 n 否
? Setup e2e tests with Nightwatch? (Y/n) 是否安裝端到端測試工具 暫時不須要 n 否
? Should we run npm install for you after the project has been created? 在建立完項目以後是否須要自動運行npm install來下載第三方包 我這裏選擇了第三個 no
Yes, use NPM
Yes, use Yarn
>No, I will handle that myself

• 因爲選擇了no，本身安裝，所以咱們要cd進去剛建立的vue-demo目錄中使用npm install來安裝第三方包

？npm install安裝的是什麼呢？
剛剛在vue init初始化的時候會生成一個package.json文件

npm install 則會安裝package.json中寫的須要依賴的第三方包，包括dependencies和devDependencies
//若是該安裝方式太慢，可使用cnpm淘寶代理鏡像
npm install把第三方包安裝完成後，在當前路徑下（我這裏是vue-demo文件夾下的路徑）輸入 npm run dev 便可運行項目

能夠看到項目已經在臨時搭建的Node服務器上跑起來了，輸入npm run dev後網站並不會自動打開，若是想輸入npm run dev後網站自動打開，修改一下配置便可，下面會說。
至於爲何輸入npm run dev就能夠把程序跑起來了呢？這個package.json的配置有關

這是配置好的一系列簡寫，npm start和輸入npm run dev是同樣的，程序照樣也能夠跑起來，可是須要你配置好或原本配置好。
沒錯，程序這樣子就跑起來了，^_^下面我來介紹一下使用vue-cli初始化後文件目錄結構以及作一些簡要的說明

vue-cli初始化文件目錄結構詳解

先主要介紹一下src裏面的核心文件，由於開發須要寫的文件幾乎都在這裏面的，別的目錄下的都是一些配置的問題。

• 爲何把這裏的App.vue稱爲根組件，main.js稱爲入口文件呢？

下面咱們來觀察App.vue（根組件）、main.js（入口文件）和index.html（主頁面）的關係

根據圖片不難發現，在main.js（入口文件）中App.vue（根組件）import進來了，掛載在了index.html（主頁面）id爲app的div上。
也就是說，掛載在index.html（主頁面）的組件就是根組件，把根組件掛載在主頁面的文件就是入口文件。

除了根組件之外的組建通常寫在components文件夾裏面，能夠經過在根組件中import組件的方式讓其展現出來，或者配置好router路由，讓組件在router-view中顯示出來。

• 上文曾提到的npm run dev後不會自動在瀏覽器中打開頁面，能夠經過修改config中的index.js文件

把autoOpenBrowser改成true~下次運行npm run dev或者npm start後即會自動啓動頁面

開發過程當中遇到的跨域問題

• 跨域問題

因爲還在script標籤開發的方式下，前端文件和後端文件都在同在apache服務器下，直接請求本機同一個端口的文件並不屬於跨域。可是在vue-cli方式下，由node.js起的一個臨時的服務器佔用的是8080端口和後端所方式的文件不處於同一個端口號，這就出現了跨域的問題。
解決方法：修改config index.js中的proxyTable

在main.js（入口文件）中加入一行Vue.prototype.HOST = '/DNA'
以請求的url地址爲url: this.HOST+"/insert/get_data"爲例子對proxyTable作一個說明
請求的url爲/DNA/insert/get_data,因爲請求的url中包含了proxyTable中配置了的/DNA,這時候Node.js代理服務器就能夠發揮做用了。Node.js會去請求http://localhost/repo/DNA/ins...，把請求獲得的接口返回給前端。
爲啥是http://localhost/repo/DNA/ins...，下面作一下講解：

路徑重寫有什麼用呢？若是你程序得接口原本就有這個路徑地址，你能夠不須要重寫，若是沒有就須要重寫，把其重寫爲空，我這個程序接口其實原本就有/DNA,其實我這裏能夠不須要重寫，而後把target改成'http://localhost/repo'

關於打包

vue-cli已經把打包的東西配置好了，只須要經過npm run build 或者 node build/build.js便可對程序進行打包。
爲啥輸入npm run build能夠進行打包呢也是package.json配置好的緣由

打包出來的文件結果，默認狀況，打包生成的文件會放在vue-demo下的dist文件夾，注意雙擊html是不能打開這個文件的（雙擊打開顯示的是一片空白），打包出來的文件須要放在服務器上才能跑起來，之前我雙擊打開看到白白的文件，一直覺得是我打包出錯了哈哈哈。

至於static文件和index.html存放的路徑是能夠修改的，能夠修改成任意的路徑，方便打包後的程序的運行。
修改config文件夾下的index.js文件中build對象的參數便可。

總結

組件化工程化的開發方式仍是很是舒服很是省心的，如今拿去ie（ie9及以上）跑不再擔憂一片白了哈哈哈哈。vue/vue-router/vuex等的知識不在這裏介紹了，你們能夠看官方文檔哦^_^