硬件系統(tǒng)：macOS
軟件應(yīng)用：Visual Studio Code（VScode）

推薦輕量級(jí)編輯器 VScode 和 Sublime text，Sublime小項(xiàng)目測(cè)試，VScode用過之后發(fā)現(xiàn)它更強(qiáng)大，組件開發(fā)項(xiàng)目很實(shí)用

1、安裝編輯器VScode

2、安裝nodeJs

https://nodejs.org/en/ 英文官網(wǎng)
http://nodejs.cn/download/ 中文網(wǎng)
選擇自己的操作系統(tǒng)下載，直接安裝

可以打開電腦自帶的cmd 蘋果電腦在Launchpad中搜素T，可以找到
也可以直接用VScode的終端效果是一樣的
VScode mac系統(tǒng)沒有快捷打開終端，可以默認(rèn)command+shift+Y打開控制臺(tái)，就看到終端了

image.png

 node -v       //如果看到數(shù)字就代表有安裝

image.png

 npm -v       //如果看到數(shù)字就代表有安裝

image.png

如果沒有安裝或者版本太老都需要重新安裝
NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題

 $ sudo npm install npm -g

由于mac有一些權(quán)限問題 sudo必須要加，不然就會(huì)報(bào)錯(cuò)，如果你在以后用npm安裝插件時(shí)報(bào)錯(cuò) 看看是否權(quán)限問題

Vue.js 提供一個(gè)官方命令行工具cli，可用于快速搭建大型單頁應(yīng)用。

# 全局安裝 vue-cli   
$ sudo npm install -g vue-cli

mac系統(tǒng)sudo 必須加，之后會(huì)輸入隱藏密碼，照常輸入，輸入正確即可，
安裝成功如下圖：

image.png

# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目my-project，換成你自己的項(xiàng)目名字
$ vue init webpack my-project

安裝過程中，會(huì)需要安裝依賴，都選yes就可以了
? 注意：Use ESLint to lint your code? (Y/n)
規(guī)范校驗(yàn)，初學(xué)者容易報(bào)錯(cuò)，如果不像用可以選no

$ cd my-project  //進(jìn)入剛剛創(chuàng)建的工程里
$ npm install   //安裝node_modules
$ npm run dev   //運(yùn)行

此時(shí)安裝過程可能比較慢，按照步驟一步一步來最終會(huì)自動(dòng)打開漂亮的http://localhost:8080/#/，大功告成！

image.png

用VScode打開剛剛創(chuàng)建的my-project的文件夾，目錄如下：