轉(zhuǎn)載自https://www.cnblogs.com/651434092qq/p/11090737.html
今天安裝vue全局變量陵究,然后鼓搗了一上午眠饮,參考這篇文章才弄對,所以我復(fù)制過來萬一在犯這個錯誤還可以看铜邮,
我沒有用到淘寶鏡像仪召,選用
一、概念
1松蒜、npm:? Nodejs下的包管理器扔茅。
2、webpack: 它主要的用途是通過CommonJS的語法牍鞠,把所有瀏覽器端需要發(fā)布的靜態(tài)資源咖摹,做相應(yīng)的準(zhǔn)備,比如資源的合并和打包难述。
3萤晴、vue-cli:? ?用戶生成Vue工程模板吐句。(幫你快速開始一個vue的項(xiàng)目,也就是給你一套vue的結(jié)構(gòu)店读,包含基礎(chǔ)的依賴庫嗦枢,只需要 npm install就可以安裝)
原文:https://www.cnblogs.com/goldlong/p/8027997.html
二、NPM安裝
1屯断、下載npm軟件文虏,URL:?https://nodejs.org/en/
2、本機(jī)軟件存放路徑:E:\開發(fā)工具\(yùn)npm\node-v8.12.0-x64.msi
3殖演、軟件安裝路徑: d:\Program Files\nodejs\
?注:一路默認(rèn)即可氧秘。
三、了解NPM常用命令
1趴久、查看環(huán)境變量:echo? %PATH%?
2丸相、查看node版本: node? -v
?這里看到npm已經(jīng)安裝好:
3、查看npm版本: npm? -v
4彼棍、查看npm的本地倉庫: npm list –global
5灭忠、修改npm的本地倉庫:
npm config set prefix ?"D:\Program Files\nodejs\node_global"
npm config set cache ?"D:\Program Files\nodejs\node_cache"
這里修改倉庫到d盤,成功
四座硕、在NPM中安裝插件
1弛作、配置淘寶 NPM 鏡像
國內(nèi)直接使用 npm 的官方鏡像非常慢,這里推薦使用淘寶 NPM 鏡像华匾。
淘寶 NPM 鏡像是一個完整 npmjs.org 鏡像映琳,你可以用此代替官方版本(只讀),同步頻率目前為 10分鐘 一次以保證盡量與官方服務(wù)同步瘦真。
你可以使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認(rèn)的 npm:
輸入命令:npm config set registry=https://registry.npm.taobao.org
輸入命令:npm config list?顯示所有配置信息刊头,我們關(guān)注一個配置文件
C:\Users\Administrator\.npmrc
2黍瞧、檢查一下鏡像站行不行命令1
輸入命令:npm config get registry
3诸尽、檢查一下鏡像站行不行命令2, 獲取vue信息(此時并非安裝)
輸入命令:npm info vue
4印颤、安裝更新模塊您机,命令:npm install npm –g
a、npm install代表安裝更新年局,? 第二個npm是指的模塊名字
b际看、 -g:代表安裝到global目錄下
5、查看升級矢否,命令:npm –v
6仲闽、查看global里有什么模塊,命令:npm list –global
五僵朗、配置VUE
1赖欣、配置PATH和NODE_PATH
a屑彻、修改path: D:\Program Files\nodejs\node_global;
b、新增NODE_PATH:D:\Program Files\nodejs\node_global\node_modules
2顶吮、配置vue社牲,? 配置 vue-router
3、安裝vue腳手架悴了,命令:npm install vue-cli –g
4搏恤、驗(yàn)證vue是否安裝成功, 命令: vue? -V
這里的v是大寫;
?
五、初始化vue 項(xiàng)目
注意:vue-cli工具是內(nèi)置了模板包括 webpack 和 webpack-simple,前者是比較復(fù)雜專業(yè)的項(xiàng)目湃交,他的配置并不全放在根目錄下的 webpack.config.js 中熟空。
1、切換到d盤根目錄搞莺,并輸入: vue init webpack vue01
最后安裝成功后:
2痛阻、進(jìn)入目錄vue01, 初始化并輸入命令:npm install安裝依賴
3、輸入命令:npm run dev腮敌,得到如下:
?成功界面阱当,提示打開地址http://localhost:8080
4、生成靜態(tài)文件糜工,輸入命令:npm run build
(生成靜態(tài)文件弊添,打開dist文件夾下新生成的index.html文件)
五、nmp下新建vue01目錄描述