快速構建vue項目

Vue.js在近兩年來的熱門程度想必你們都瞭解。因其輕量、具備簡單、靈活的 API和強大的社區被許多開發者所青睞。學習Vue首先你要明白你該如何從無到有去構建一個項目，Vue官方建議使用Vue-cli腳手架工具。官方推薦的性能什麼的就不用說了。廢話很少說，如今開始咱們的項目構建。

1.全局安裝vue-cli

cmd進入控制檯，鍵入命令 npm install -g vue-cli全局安裝vue-cli腳手架工具（前提是已經安裝好了node.js，沒安裝的小夥伴打開連接下載安裝，由於node.js安裝都是傻瓜式安裝，一切按着默認步驟走就好，最後在控制檯鍵入命令入 node -v查看是否安裝成功）

2.初始化項目

cd 進入你想要安裝的路徑（我這裏默認安裝在user下）鍵入命令 vue init webpack vueProject(vueProject爲項目名-本身起，安裝類型爲webpack，固然若是大家不想用webpack也能夠更換成其餘的打包工具)

到這裏恭喜你已經安裝成功~

注意：

• 項目名不能存在大寫，不然會報錯，如圖的sorry,name can no....
• 剛開始接觸Vue開發，建議不用ESLint，固然這個有利於你的代碼編寫規範。只能說有利有弊，這個須要大家本身去感覺。

3.項目結構

以下圖：

4.安裝依賴

• cd vueProject(進入項目名)
• cnpm install(安裝依賴)

注：cnpm是淘寶 NPM 鏡像，在國內推薦使用，下載速度比npm要快。

安裝命令：npm install -g cnpm --registry=https://registry.npm.taobao.org 安裝成功後項目結構會多一個依賴文件，以下圖：

node_modules是依賴加載庫，由於初始化模塊依賴比較多因此咱們用cnpm install,它只安裝package.json裏有的依賴。若是隻須要加載一個依賴的話咱們能夠： cnpm install 依賴插件名 --save(--save加載依賴的同時能記錄在package.json裏)或者也能夠先在package.json裏寫入要加載的依賴再 cnpm install

5.項目運行

cnpm run dev 由於vue-cli默認監聽8080端口（能夠在config/index.js裏面查看或修改監聽端口） 運行成功後在瀏覽器輸入：localhost:8080查看

注意：這裏是默認服務啓動的是本地的8080端口，因此請確保你的8080端口不被別的程序所佔用。

6.項目打包

鍵入命令：cnpm run build 打包後項目會生成一個dist文件夾以下圖：

打包後的項目就能夠部署到服務器上。

舉個栗子

在用vue+node+express架構時能夠將打包後的文件放在express/server/pubilc下。當運行服務的時候項目就能夠直接跑起來了，文件結構以下圖：

注意：由於這樣拿數據是跨域的，因此通常能夠用代理接口的作法。在config/index.js下以下圖：

在瀏覽器輸入： localhost:8080/api它請求的是 localhost:3001

7.結語

至此簡單的一個項目構建完畢....有興趣的能夠移步這是一個完整的vue項目，感興趣的小夥伴能夠clon下來本身跑跑看。今天的分享暫告一段落，但願能給你們帶來幫助，我也是從0開始去學習vue其中遇到過不少坑。但願小夥伴們能順利些，若是對你有幫助給個讚唄。