Vue在Windows系統下本地項目的安裝與部署

轉自CSDN的：AI呂小布：?https://blog.csdn.net/qq_37495916/article/details/80626615
一、項目的前期準備

1、node.js 的安裝

Vue項目通常通過webpack工具來構建，而webpack命令是依賴node.js開發環境的，所以首先要安裝node.js。node.js的官方地址為：https://nodejs.org/en/download/，下載相應的版本。

測試是否安裝成功：在終端輸入npm若顯示npm相關命令則安裝成功。

2、cnpm 的安裝

npm包含開發過程中依賴的包部署在國外，下載起來比較慢，國內的淘寶對npm的鏡像服務器cnpm是比較快的。我們通過npm下載cnpm，完成以后在下載需要以來的包是就可以使用cnpm命令下載。

cnpm下載命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

備注：npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安裝、卸載、管理依賴等）, NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題，常見的使用場景有以下幾種：

允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。

允許用戶從NPM服務器下載并安裝別人編寫的命令行程序到本地使用。

允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用。

3、vue-cli 的安裝

vue-cli是vue官方提供的一個命令行工具，可用于快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需一分鐘即可啟動帶熱重載、保存時靜態檢查以及可用于生產環境的構建配置的項目。

Vue-cli安裝命令：cnpm install -g vue-cli

npm install -g @vue/cli? ? //升級3.0

測試是否安裝成功：在終端輸入vue若顯示vue相關命令則安裝成功。

二、創建一個vue項目

1、

初始化名為first_vue的項目

在命令行中運行命令?vue init webpack first_vue（如果不行，使用?vue-init webpack first_vue命令來安裝）。解釋一下這個命令，這個命令的意思是初始化一個項目，其中webpack是構建工具，也就是整個項目是基于webpack的。其中firstVue是整個項目文件夾的名稱，這個文件夾會自動生成在你指定的目錄中。

? Project description (A Vue.js project) vue-cli新建項目(項目描述)；

? Author (*******)；? Vue build?

? Runtime + Compiler: recommended for most users?

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere?

這里選擇Runtime + Compiler: recommended for most users；

? Install vue-router? (Y/n) y?是否使用vue-router，這里根據需求選擇；

? Use ESLint to lint your code? (Y/n)n?是否使用ESLint，這里根據需求選擇；

? Pick an ESLint preset (Use arrow keys)?

? Standard (https://github.com/feross/standard)?

Airbnb (https://github.com/airbnb/javascript) none (configure it yourself)?這里選擇Standard (https://github.com/feross/standard)

?? Setup unit tests with Karma + Mocha? (Y/n) n?是否需要單元測試，這里根據需求選擇；Setup e2e tests with Nightwatch? (Y/n) n是否需要單元測試，這里根據需求選擇；

2、啟動first_vue項目

根據提示：

cd first_vue

然后

npm run dev

啟動項目。

根據提示我們的項目在本地的8080端口上運行。（若是你在本地想把項目啟動在其他端口上，只需在：項目/config/index.js文件下dev配置下的port改為你需要的端口就行）。

三、項目如何運行

1、vue頁面結構

vue頁面中有三大模塊<template></template>、<script></script>、<style></style>。

<template></template>中寫我們的頁面。template下必須只有一個根元素，可以使用一個容器元素包裹住，例如div。頁面從index.html（首頁入口文件）文件開始，繼承src/App.vue（項目入口文件），然后再顯示每個vue頁面。

<script></script>中寫我們的腳本。其中可以包含：

data：定義我們的數據類型。Vue 將會遞歸將 data 的屬性轉換為 getter/setter，從而讓 data 的屬性能夠響應數據變化。

created：在實例創建完成后被立即調用。

components：包含 Vue 實例可用組件的哈希表。將引入的組件放在這里。

methods：將定義的函數寫到這里

<style></style>寫頁面樣式。

2、路由如何跳轉

瀏覽器中請求的路由會在router文件夾中進行映射。需要用到的vue在使用前import引入。

知識剖析

npm install moduleNames：安裝Node模塊

安裝完畢后會產生一個node_modules目錄，其目錄下就是安裝的各個node模塊。

node的安裝分為全局模式和本地模式。

一般情況下會以本地模式運行，包會被安裝到和你的應用程序代碼的本地node_modules目錄下。

在全局模式下，Node包會被安裝到Node的安裝目錄下的node_modules下

為什么要保存至PACKAGE.JSON？

因為node插件包非常大，版本龐雜，所以不加入package信息，模塊間的依賴變得非常困難，將配置信息寫入package.json并將其加入版本管理，其他開發者對應下載即可（命令提示符執行npm install，則會根據package.json下載所有需要的包）。 每個項目的根目錄下面，一般都有一個package.json文件，定義了這個項目所需要的各種模塊，以及項目的配置信息（比如名稱、版本、許可證等元數據）。npm install 命令根據這個配置文件，自動下載所需的模塊，也就是配置項目所需的運行和開發環境。

PACKAGE.JSON 屬性說明：

name - 包名。（不要把node或者js放在名字中）

version - 包的版本號。

dependencies - 項目運行所依賴的模塊

devDependencies - 項目開發所需要的模塊

bin - 這需要在你的package.json中提供一個bin字段，它是一個命令名和本地文件名的映射。在安裝時，如果是全局安裝，npm將會使用符號鏈接把這些文件鏈接到prefix/bin，如果是本地安裝，會鏈接到./node_modules/.bin/

npm常用命名

使用npm卸載插件：npm uninstall < name > [-g] [--save-dev] PS：不要直接刪除本地插件包

使用npm更新插件：npm update < name > [-g] [--save-dev]?

更新全部插件：npm update [--save-dev]?

查看npm幫助：npm help?

查看當前目錄已安裝插件：npm list?

還有一些npm的簡單命令就不多說了

PS：npm安裝插件過程：從http://registry.npmjs.org下載對應的插件包（該網站服務器位于國外，所以經常下載緩慢或出現異常），解決辦法就是cnpm

CNPM介紹：

官方網址：http://npm.taobao.org

安裝：命令提示符執行npm install cnpm -g --registry=https://registry.npm.taobao.org

注意：安裝完后最好查看其版本號cnpm -v或關閉命令提示符重新打開，安裝完直接使用有可能會出現錯誤?

PS：cnpm跟npm用法完全一致，只是在執行命令時將npm改為cnpm。

3.常見問題

bower 和 npm有什么區別

4.解決方案

npm 是伴隨 Node.js 出現的一個包管理器，最開始只能支持 Node.js 的模塊管理，但是后來， npm 官網經過一次改版，打出的口號是，javascript 的包管理器，所以，其已經不在局限于是 Node.js 的模塊管理了，已經通用到了所有 js 的包管理工具了，可以說，前后通吃了。

bower 的話，從一開始，就是專門為前端表現設計的包管理器，一切全部為前端考慮的。npm 和 bower 的最大區別，就是 npm 支持嵌套地依賴管理，而 bower只能支持扁平的依賴（嵌套的依賴，由 程序員自己解決）。

嵌套依賴，指的就是，你依賴的軟件包，還有它自己的依賴，好像摘葡萄，一摘一大串。在服務器環境的時候，這并沒什么關系，因為存儲空間夠大，一切代碼都是本地運行，只要解決完依賴就行了， 但是到了用戶產品的瀏覽器里，就很成問題了，你不能讓用戶去下載好幾M的js代碼，那就太糟糕了。在這個情況下，就需要程序員自己手動解決用到的類庫的嵌套依賴問題。比如確保各種各樣的插件 都依賴同一個版本的jQuery。

擴展思考

cnpm有哪些問題？

1.cnpm 的倉庫只是 npm 倉庫的一個拷貝，它不承擔 publish 工作，所以你用 cnpm publish 命令會執行失敗的

2.不僅是 publish 會執行失敗，其它的需要注冊用戶(npm adduser)、或者修改 package 狀態等命令都無法用 cnpm

7.參考文獻

npm 模塊安裝機制簡介

開發者對 npm 公司不滿，unpublish 了自己的所有模塊

npm的一些常用命令

bower 和 npm 的區別詳細介紹

更多提問

Q:全局安裝和本地安裝的區別？

因為全局模式安裝,包可以供所有的程序使用。本地安裝則不可以。 npm 默認會把包安裝到當前目錄下。這反映了 npm 不同的設計哲學。如 果把包安裝到全局,可以提高程序的重復利用程度,避免同樣的內容的多 份副本,但壞處是難以處理不同的版本依賴。如果把包安裝到當前目錄, 或者說本地,則不會有不同程序依賴不同版本的包的沖突問題,同時還減 輕了包作者的 API 兼容性壓力,但缺陷則是同一個包可能會被安裝許多次。

Q:為什么進行了全局安裝還要進行本地安裝

1、在js實例代碼中，默認下node.js會在NODE_PATH和目前js所在項目下的node_modules文件夾下去尋找模塊，因此，如果只是全局安裝，不能直接通過require()的方式去引用模塊，需要手動解決包路徑的配置問題，當然你也可以復制全局安裝的node_modules文件夾到項目下，還有辦法可以選擇將環境變量的NODE_PATH設置為C:\Program Files\nodejs。

?2.對于包的更新不好管理，可能你需要為每個包重新命名，如gulp@3.8.1、gulp@3.9.1...，為了區別不同項目使用指定的包，保證模塊之間的相互依賴，區別每個項目正常運行

Q：如何在package.JSON的dependencies和devDependencies寫入信息

A:npm install --savebabel-cli和npm install -devbabel-cli使用這兩個命令安裝后可自動寫入文件

npm install --save-devbabel-cli也可以在一起用

鏈接：http://www.lxweimin.com/p/f581cf9360a2? ?來源：簡書? ?作者：沒事兒啊