一、npm 版本查看及升級(jí)

// 查看版本npm -v// 升級(jí)版本npm install -g npm

注：若npm install 報(bào)錯(cuò) permission denied，使用sudo npm install -g npm

二、安裝vue相關(guān)工具

1. 安裝vue

// 最新穩(wěn)定版npm install vue// 安裝vue-cli腳手架構(gòu)建工具npm install --global vue-cli

安裝完成，輸入vue -V，如果出現(xiàn)相應(yīng)的版本號(hào)，則說(shuō)明安裝成功。如圖：

注：Mac 使用安裝vue-cli腳手架的時(shí)候報(bào)錯(cuò)，

解決方法：

1.切換到/usr/local/lib/node_modules/目錄

cd /usr/local/lib/node_modules/

2.刪除vue-cli文件夾

open /usr/local/lib/node_modules/

3.重新安裝vue-cli

npm install --global vue-cli

2. 安裝webpack

npm install --global webpack

npm install --global webpack-cli

安裝完成，輸入webpack -v，如果出現(xiàn)相應(yīng)的版本號(hào)，則說(shuō)明安裝成功。如圖：

三、新建項(xiàng)目

1. 創(chuàng)建新項(xiàng)目

// 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目vue init webpack my-project// 這里需要進(jìn)行一些配置，默認(rèn)回車即可

? Project name vue-start //項(xiàng)目名稱

? Project description A Vue.js project // 項(xiàng)目描述

? Author  // 作者名稱

? Vue build standalone // 推薦選前者

? Install vue-router?

// 是否安裝vue-router路由組件，也可不安裝使用第三方或簡(jiǎn)單的項(xiàng)目自己寫(xiě)

? Use ESLint to lint your code?

// 是否使用eslint管理代碼，個(gè)人項(xiàng)目不推薦

? Set up unti tests?

// 是否使用karma來(lái)做單元測(cè)試

? Setup e2e tests with Nightwatch?

// 是否安裝e2e測(cè)試

? Should we run 'npm install' for you after the project has been created?

// 選擇使用npm或yarn進(jìn)行安裝模塊

2. 運(yùn)行項(xiàng)目

cd my-project

npm run dev

成功執(zhí)行以上命令后訪問(wèn) http://localhost:8080/，輸出結(jié)果如下所示：

退出監(jiān)聽(tīng)，直接關(guān)閉cmd窗口即可。

目錄結(jié)構(gòu)

• build -- 大部分是webpack的配置文件

• config -- 配置文件，比如配置監(jiān)聽(tīng)端口

• node_modules -- 依賴包都在這里

• src -- 主工程文件夾 ，基本上所有的開(kāi)發(fā)都在這個(gè)文件夾進(jìn)行

• static -- 靜態(tài)文件目錄

• package.json -- 項(xiàng)目的一些配置信息