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目錄描述

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM