注意：安裝vue之前需要先安裝node.js

Vue項(xiàng)目初始化，如果已經(jīng)安裝了vue-cli，從第二步開(kāi)始才做

1、安裝：vue-cli
npm install -g @vue/cli
2、初始化項(xiàng)目：這個(gè)就是創(chuàng)建項(xiàng)目，先cd 到你要?jiǎng)?chuàng)建項(xiàng)目的文件夾下
vue init webpack objectname
3、進(jìn)入項(xiàng)目文件夾：cd objectname 文件夾下
4、安裝依賴：每次新建或?qū)腠?xiàng)目時(shí)，都要在項(xiàng)目的根目錄下執(zhí)行，所以這里要cd 到項(xiàng)目項(xiàng)目根目錄
npm install
5、運(yùn)行項(xiàng)目，這個(gè)也要在項(xiàng)目的根目錄下執(zhí)行
npm run dev

注意：系統(tǒng)會(huì)自動(dòng)生成一個(gè)README.md 文件，這個(gè)文件是給開(kāi)發(fā)者記錄用的說(shuō)明文檔，我們可以吧開(kāi)發(fā)中需要注意的地方記錄在這里

項(xiàng)目目錄結(jié)構(gòu)

1、index.html : 項(xiàng)目根視圖
2、.postcssrc.js : postcss 配置文件，用于配置git管理或其他管代碼是的忽略文件
3、editorconfig : 基本信息的配置文件，一本不需要手動(dòng)設(shè)置什么
4、.babelrc ： ES6相關(guān)設(shè)置
5、static文件夾 ：項(xiàng)目的靜態(tài)文件存儲(chǔ)文件夾，這個(gè)可以直接通過(guò)瀏覽器訪問(wèn)
6、src文件夾 ：源碼文件，存儲(chǔ)項(xiàng)目代碼
7、node_modules文件夾 ： 三方依賴庫(kù)的存放文件
8、config文件夾 ： 存放開(kāi)發(fā)過(guò)程中服務(wù)器上的配置和項(xiàng)目屬性設(shè)置等的配置文件，如：服務(wù)器跨域、生產(chǎn)環(huán)境、開(kāi)發(fā)環(huán)境等的配置
9、build文件夾 ： 存放logo，build使用的 服務(wù)器配置相關(guān)文件、生成配置文件、開(kāi)發(fā)配置文件等文件

src下目錄說(shuō)明：

1、 main.js : 入口文件
2、App.vue : 第一個(gè)vue組件
3、components文件夾 ： 子組件存放路徑
4、assets文件夾 ： 開(kāi)發(fā)過(guò)程中要使用的公共文件的存放文件夾，例如：字體、圖片、視頻等

安裝 cnpm

npm

• npm是node.js安裝的時(shí)候自動(dòng)安裝的，所有不用單獨(dú)安裝
• 允許用戶從NPM服務(wù)器下載別人編寫的第三方包到本地使用。
• 允許用戶從NPM服務(wù)器下載并安裝別人編寫的命令行程序到本地使用。
• 允許用戶將自己編寫的包或命令行程序上傳到NPM服務(wù)器供別人使用

npm命令

• npm -v 來(lái)測(cè)試是否成功安裝
• 查看當(dāng)前目錄已安裝插件：npm list
• 更新全部插件： npm update [ --save-dev ]
• 使用 npm 更新對(duì)應(yīng)插件： npm update <name> [ -g ] [ --save-dev]
• 使用 npm 卸載插件： npm uninstall <name> [ -g ] [ --save-dev ]

cnpm

• 淘寶團(tuán)隊(duì)做的國(guó)內(nèi)鏡像，因?yàn)閚pm的服務(wù)器位于國(guó)外，速度比較慢，并且有些設(shè)置經(jīng)常安裝不上，可能會(huì)影響安裝。淘寶鏡像在國(guó)內(nèi)，速度快，并且淘寶鏡像與官方同步頻率目前為 10分鐘 一次以保證盡量與官方服務(wù)同步。所以國(guó)內(nèi)我們最好安裝和使用cnpm
• 安裝：命令提示符執(zhí)行
  npm install cnpm -g --registry=https://registry.npm.taobao.org
• cnpm -v 來(lái)測(cè)試是否成功安裝

通過(guò)改變地址來(lái)使用淘寶鏡像

• npm的默認(rèn)地址是https://registry.npmjs.org/
• 可以使用npm config get registry查看npm的倉(cāng)庫(kù)地址
• 可以使用npm config set registry https://registry.npm.taobao.org來(lái)改變默認(rèn)下載地址，達(dá)到可以不安裝cnpm就能采用淘寶鏡像的目的，然后使用上面的get命令查看是否成功。

nrm

• nrm包安裝命令： npm i nrm -g

• nrm能夠管理所用可用的鏡像源地址以及當(dāng)前所使用的鏡像源地址，但是只是單純的提供了幾個(gè)url并能夠讓我們?cè)谶@幾個(gè)地址之間方便切換

• nrm ls即nrm list，查看所有可用的鏡像，并可以切換。*號(hào)表示當(dāng)前npm使用的地址，可以使用命令nrm use taobao或 nrm use npm來(lái)進(jìn)行兩者之間的切換。

  image

-g -S -D

• -g：全局安裝。 將會(huì)安裝在C：\ Users \ Administrator \ AppData \ Roaming \ npm，并且寫入系統(tǒng)環(huán)境變量；非全局安裝：將會(huì)安裝在當(dāng)前定位目錄;全局安裝可以通過(guò)命令行任何地方調(diào)用它，本地安裝將安裝在定位目錄的node_modules文件夾下，通過(guò)要求調(diào)用;
• -S：即npm install module_name --save,寫入package.json的dependencies ,dependencies 是需要發(fā)布到生產(chǎn)環(huán)境的，比如jq，vue全家桶，ele-ui等ui框架這些項(xiàng)目運(yùn)行時(shí)必須使用到的插件就需要放到dependencies
• -D：即npm install module_name --save-dev,寫入package.json的devDependencies ,devDependencies 里面的插件只用于開(kāi)發(fā)環(huán)境，不用于生產(chǎn)環(huán)境。比如一些babel編譯功能的插件、webpack打包插件就是開(kāi)發(fā)時(shí)候的需要，真正程序打包跑起來(lái)并不需要的一些插件。

為什么要保存在package.json 因?yàn)閚ode_module包實(shí)在是太大了。用一個(gè)配置文件保存，只打包安裝對(duì)應(yīng)配置文件的插件，按需導(dǎo)入。

作者：Upcccz
鏈接：http://www.itdecent.cn/p/115594f64b41
來(lái)源：簡(jiǎn)書(shū)
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。