Vue筆記：使用node開發vue入門實例

安裝NPM

首先在命令終端輸入 npm -v 檢測是否安裝 npm。若是沒有，按照下面教程進行安裝。

下載地址： nodejs中文網

到官網下載本身系統對應的版本，這裏咱們下載Windows系統的64位zip文件，下載完成後解壓，能夠看到裏面有一個node.exe的可執行文件。

把Node添加到系統環境變量裏面，打開cmd命令行，輸入npm -v，若是出現以下圖的顯示，說明已經安裝正確。

 

若是你安裝的是舊版本的 npm，能夠經過 npm 命令進行升級。

sudo npm install npm -g #linux

npm install npm -g　　# windows

能夠看到升級以後，再次執行 npm -v 查看版本已經升級到 6.4.0 了。

更多NodeJS教程能夠參考如下資料

中文官網：http://nodejs.cn/api/

菜鳥學堂：https://www.runoob.com/nodejs/nodejs-tutorial.html

安裝 webpack

安裝好 npm 以後，就能夠經過 npm 命令來下載各類工具了。

安裝打包工具 webpack，-g 表示全局安裝。

npm install webpack -g

更多NodeJS教程能夠參考如下資料

菜鳥學堂：http://www.runoob.com/w3cnote/webpack-tutorial.html

安裝 vue-cli

安裝 vue 腳手架項目初始化工具 vue-cli，-g 表示全局安裝。

npm install vue-cli -g

淘寶鏡像

由於 npm 使用的是國外中央倉庫，有時候下載速度比較「喜人」，就像 Maven 有國內鏡像同樣，npm 在國內也有鏡像可用。這裏建議使用淘寶鏡像。

安裝淘寶鏡像，安裝成功後 用 cnpm 替代 npm 命令便可，如： cnpm install webpack -g 。

npm install -g cnpm --registry=https://registry.npm.taobao.org

建立項目

經過 vue-cli 生成一個項目，以下面是生成一個名爲 myproject 的項目。

vue init webpack myproject

輸入以上命令以後，安照提示，輸入相應的內容便可。

$ vue init webpack kitty 　　-- 這個是那個安裝vue腳手架的命令
This will install Vue 2.x version of the template. 　　--這裏說明將要建立一個vue 2.x版本的項目
For Vue 1.x use: vue init webpack#1.0 kitty
? Project name (kitty) 　　--項目名稱
? Project name kitty
? Project description (kitty project) 　　--項目描述
? Project description kitty project
? Author Louis 　　-- 項目建立者
? Author Louis
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) 　　-- 是否安裝Vue路由，也就是之後是spa（但頁面應用須要的模塊）
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n 　　--是否啓用eslint檢測規則，這裏我的建議選no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "kitty".
To get started: 　　-- 這裏說明如何啓動這個服務
cd kitty
npm install
npm run dev

項目結構

生成的項目目錄結構以下圖所示。

目錄說明（截圖來自菜鳥學堂）：

 

安裝依賴

進入項目目錄，這裏是 kitty 目錄。

執行安裝命令，會下載安裝依賴的模塊，下載的依賴會安裝到 node_modules 目錄。

npm install　　# 淘寶鏡像用 cnpm

啓動運行

依賴下載安裝完成以後，就能夠啓動運行了。輸入如下命令啓動。

npm run dev

若是出現下面的提示，表示啓動成功，瀏覽器訪問顯示地址，會出現一個vue的歡迎頁面。

I  Your application is running here: http://localhost:8088

編譯打包

開發完成後，經過如下命令就可把整個項目打包，生成到 dist 目錄下，直接拷貝到服務器便可。

npm run build

 

---

做者：朝雨憶輕塵
出處：https://www.cnblogs.com/xifengxiaoma/ 版權全部，歡迎轉載，轉載請註明原文做者及出處。