一、概念

1、npm:? Nodejs下的包管理器。

2、webpack: 它主要的用途是通過CommonJS的語法，把所有瀏覽器端需要發(fā)布的靜態(tài)資源，做相應(yīng)的準(zhǔn)備，比如資源的合并和打包。

3、vue-cli:? ?用戶生成Vue工程模板。（幫你快速開始一個(gè)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 鏡像是一個(gè)完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘 一次以保證盡量與官方服務(wù)同步。

你可以使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認(rèn)的 npm:

輸入命令：npm config set registry=https://registry.npm.taobao.org

輸入命令：npm config list 顯示所有配置信息，我們關(guān)注一個(gè)配置文件

C:\Users\Administrator\.npmrc

?

??

?

2、檢查一下鏡像站行不行命令1

輸入命令：npm config get registry

?

?

3、檢查一下鏡像站行不行命令2， 獲取vue信息（此時(shí)并非安裝）

輸入命令：npm info vue

?

?

4、安裝更新模塊，命令：npm install npm –g

a、npm install代表安裝更新，? 第二個(gè)npm是指的模塊名字

b、 -g：代表安裝到global目錄下

?

5、查看升級(jí)，命令：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目錄描述

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/651434092qq/p/11090737.html

總結(jié)

以上是生活随笔為你收集整理的vue开发搭建（npm安装 + vue脚手架安装）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。