vue开发搭建（npm安装 + vue脚手架安装）
一、概念
1、npm:? Nodejs下的包管理器。
2、webpack: 它主要的用途是通過CommonJS的語法，把所有瀏覽器端需要發布的靜態資源，做相應的準備，比如資源的合并和打包。
3、vue-cli:? ?用戶生成Vue工程模板。（幫你快速開始一個vue的項目，也就是給你一套vue的結構，包含基礎的依賴庫，只需要 npm install就可以安裝）
原文：https://www.cnblogs.com/goldlong/p/8027997.html
二、NPM安裝
1、下載npm軟件，URL: https://nodejs.org/en/
?
?
2、本機軟件存放路徑：E:\開發工具\npm\node-v8.12.0-x64.msi
3、軟件安裝路徑: d:\Program Files\nodejs\
?注：一路默認即可。
三、了解NPM常用命令
1、查看環境變量：echo? %PATH%?
2、查看node版本： node? -v
?這里看到npm已經安裝好：
?
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 鏡像
國內直接使用 npm 的官方鏡像非常慢，這里推薦使用淘寶 NPM 鏡像。
淘寶 NPM 鏡像是一個完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘 一次以保證盡量與官方服務同步。
你可以使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm:
輸入命令：npm config set registry=https://registry.npm.taobao.org
輸入命令：npm config list 顯示所有配置信息，我們關注一個配置文件
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、驗證vue是否安裝成功, 命令: vue? -V
這里的v是大寫;
?
?
?
五、初始化vue 項目
注意：vue-cli工具是內置了模板包括 webpack 和 webpack-simple,前者是比較復雜專業的項目，他的配置并不全放在根目錄下的 webpack.config.js 中。
1、切換到d盤根目錄，并輸入： vue init webpack vue01
?
最后安裝成功后：
2、進入目錄vue01, 初始化并輸入命令:npm install安裝依賴
?
3、輸入命令：npm run dev，得到如下：
?
???? 成功界面，提示打開地址http://localhost:8080
?
?
4、生成靜態文件，輸入命令：npm run build
?
(生成靜態文件，打開dist文件夾下新生成的index.html文件)
?
五、nmp下新建vue01目錄描述
?
?
轉載于:https://www.cnblogs.com/651434092qq/p/11090737.html
總結
以上是生活随笔為你收集整理的vue开发搭建（npm安装 + vue脚手架安装）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux查看占用内存最多的程序
- 下一篇： Vue学习之路1 小白起步