Vue.js（讀音 /vjuː/, 類似於 view）是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。它不僅易於上手，還便於與第三方庫或既有項目整合。
下面介紹三種 Vue.js 的安裝方法：
1.獨立版本
我們可以在Vue.js的官網上直接下載vue.js,並在.html中通過<script>標簽中引用。-> <script src = ../vue.js> </script> 開發環境不要使用最小壓縮版，不然會沒有錯誤提示和警告！（頁面中直接使用）
使用vue多頁面開發：
引入vue.js
創建一個vue根實例 new Vue({選項})
2.使用CDN方法
BootCDN（國內） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js ， （國內不穩定）
unpkg：https://unpkg.com/vue/dist/vue.js, 會保持和 npm 發布的最新的版本一致。（推薦使用）
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js，如（<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>）
3.NPM方法（推薦使用）
在用Vue.js構建大型應用的時候推薦使用NPM安裝方法，NPM能很好的和諸如Webpack或者Browserify 模塊打包器配合使用。Vue.js 也提供配套工具來開發單文件組件。
首先，先列出我們接下來需要的東西：
node.js環境（npm包管理器）
vue-cli 腳手架構建工具
cnpm npm的淘寶鏡像
1） 安裝node.js
從node.js官網下載並安裝node，安裝過程很簡單，一直點下一步就ok了，安裝完之后，我們通過打開命令行工具（win+R）,輸入
node -v 命令，查看node的版本，若出現相應的版本號，則說明你安裝成功了。
npm包管理器，是集成在node中的，所以安裝了node也就有了npm,直接輸入 npm -v 命令，顯示npm的版本信息。
到目前為止，node的環境已經安裝完成，npm 包管理器也有了，由於有些npm資源被屏蔽或者是國外資源的原因，經常會導致npm安裝依賴包的時候失敗，所以我們還需要npm的國內鏡像----cnpm.
2） 安裝cnpm
在命令行中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org ，然后等待，沒報錯表示安裝成功，（我的已經安裝過了，顯示更新成功的信息），如下圖：
完成之后，我們就可以用cnpm代替npm來安裝依賴包了。如果想進一步了解cnpm的，查看淘寶npm鏡像官網。
3） 安裝vue-cli2 腳手架構建工具（必須在全局中進行安裝）
在命令行中運行命令 npm install -g vue-cli ，然后等待安裝完成。
是否安裝成功：vue -V
通過以上三部，我們需要准備的環境和工具都准備好了，接下來就開始使用vue-cli來構建項目。
首先我們要選擇存放項目的位置，然后再用命令行cd到項目的目錄中，在這里，我選擇在c盤下創建新的目錄（NodeTest 目錄），用cd 將目錄切到該目錄下，如下圖：
在NodeTest 目錄下，在命令行中運行命令 vue init webpack firstApp（初始化一個完整版的項目） 。解釋一下這個命令，這個命令的意思是初始化一個項目，其中webpack是構建工具，也就是整個項目是基於webpack的。其中firstApp是整個項目文件夾的名稱，這個文件夾會自動生成在你指定的目錄中（我的實例中，會在NodeTest 目錄生成該文件夾），如下圖：
若我們在編輯器中已經手動創建了這個項目存放的文件夾cd到項目中：vue init webpack;初始化一下即可,同時還會加載webpack所依賴的包：
是否是在本目錄下進行創建
輸入命令后，會詢問我們幾個簡單的選項，我們根據自己的需要進行填寫就可以了。
Project name :項目名稱 ，如果不需要更改直接回車就可以了。注意：這里不能使用大寫，所以我把名稱改成了vueclitest
Project description:項目描述，默認為A Vue.js project,直接回車，不用編寫。
Author：作者，如果你有配置git的作者，他會讀取。
Install vue-router? 是否安裝vue的路由插件，我們這里需要安裝，所以選擇Y
Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風格。我們這里不需要輸入n（建議），如果你是大型團隊開發，最好是進行配置。
setup unit tests with Karma + Mocha? 是否需要安裝單元測試工具Karma+Mocha，我們這里不需要，所以輸入n。
Setup e2e tests with Nightwatch?是否安裝e2e來進行用戶行為模擬測試，我們這里不需要，所以輸入n
運行初始化命令的時候會讓用戶輸入幾個基本的配置選項，如項目名稱、項目描述、作者信息，對於有些不明白或者不想填的信息可以一直按回車去填寫就好了，等待一會，就會顯示創建項目創建成功，如下圖:
接下來，我們去NoteTest目錄下去看是否已創建文件：
打開firstApp 項目，項目中的目錄如下：
介紹一下目錄及其作用：
build：最終發布的代碼的存放位置。
config：配置路徑、端口號等一些信息，我們剛開始學習的時候選擇默認配置。
node_modules：npm 加載的項目所需要的各種依賴模塊。
src：這里是我們開發的主要目錄（源碼），基本上要做的事情都在這個目錄里面，里面包含了幾個目錄及文件：
assets:放置一些圖片(會根據圖片大小分類進行base64命名還是其他方式命名)，如logo等
components:目錄里放的是一個個的組件文件
router/index.js：配置路由的地方
App.vue：項目入口組件（跟組件），我們也可以將組件寫這里，而不使用components目錄。主要作用就是將我們自己定義的組件通過它與頁面建立聯系進行渲染，這里面的<router-view/>必不可少。
main.js ：項目的核心文件（整個項目的入口js）引入依賴包、默認頁面樣式等（項目運行后會在index.html中形成一個app.js文件）。
static：靜態資源目錄(會原分不動的對文件進行處理)，如圖片、字體等。
test：初始測試目錄，可刪除
.XXXX文件：配置文件。
index.html：html單頁面的入口頁面，可以添加一些meta信息或者同統計代碼啥的或頁面的重置樣式等。
package.json：項目配置信息文件/所依賴的開發包的版本信息及所依賴的插件信息。（大概版本）
package-lock.json：項目配置信息文件/所依賴的開發包的版本信息及所依賴的插件信息。（具體版本）
README.md：項目的說明文件。
webpack.config.js：webpack的配置文件，例：把.vue的文件打包成瀏覽器能讀懂的文件。
.babelrc:是檢測es6語法的配置文件，例：適配哪些瀏覽器的限制
.gitignore:上傳到服務器忽略哪些文件的配置（比如模擬本地數據mock不讓他在get提交/打包上線的時候忽略不使用可在這里配置）
.postcssrc.js:前綴的配置 （css轉化的配置）
.editorconfig:對代碼進行規范，例：root是否進行檢測，代碼尾部是否換行，縮行前面幾個空格...（建議定義這個規范）
.eslintrc.js:配置eslint語法規則（在這里面的rules屬性中配置讓哪個語法規則失效）
.eslintignore:忽略eslint對項目某些文件的語法規則的檢查
這就是整個項目的目錄結構，其中，我們主要在src目錄中做修改（模塊化開發）。這個項目現在還只是一個結構框架，整個項目需要的依賴資源都還沒有安裝。
cd 項目名；進入項目中
安裝項目所需要的依賴包/插件（在package.json可查看）：執行 cnpm install (npm可能會有警告，這里可以用cnpm代替npm了，運行別人的代碼需要先安裝依賴)如果創建項目的時候沒有報錯，這一步可以省略。如果報錯了 cd到項目里面運行 cnpm install / npm install
若拿到別人的項目或從gethub上下載的項目第一步就是要在項目中cnpm install;下載項目所依賴的插件，然后npm run dev 運行項目
安裝完成之后，我們到自己的項目中去看，會多一個node_modules文件夾，這里面就是我們所需要的依賴包資源。
安裝完依賴包資源后，我們就可以運行整個項目了。
運行項目
在項目目錄中，運行命令 npm run dev （npm run start），會用熱加載的方式運行我們的應用，熱加載可以讓我們在修改完代碼后不用手動刷新瀏覽器就能實時看到修改后的效果。
項目啟動后，在瀏覽器中輸入項目啟動后的地址：
在瀏覽器中會出現vue的logo：
至此，vue的三種安裝方式已介紹完畢。
項目完成后輸入打包命令:cnpm run build;會生成一個dist文件，就是我們的打包文件，點擊.html文件能運行則成功。
一、搭建vue的開發環境（大綱）
必須安裝node.js
搭建vue的開發環境，安裝vue的腳手架工具 官方命令行工具
npm install - -global vue-cli
3.創建項目 必須cd到對應的一個項目里面
vue init webpack vue-demo01
cd vue-demo01
cnpm install / npm install 如果創建項目的時候沒有報錯，這一步可以省略。如果報錯了 cd到項目里面運行 cnpm install / npm install
npm run dev/npm run start
4.另一種創建項目的方式中小型項目 （推薦） ***
vue init webpack-simple vuedemo02
cd vuedemo02
cnpm install / npm install
npm run dev
拿到別人的項目不能正常運行后看有沒有node_modules這個文件（項目所有的依賴），若沒有cd到項目中安裝項目的依賴：cnpm install/npm install
二、升級：vue-cli3.0
一、使用vue-cli3.0
Vue CLI的包名稱由vue-cli改成了@vue/cli
如果你已經全局安裝了舊版本的vue-cli(3.0以下)，你需要先通過npm uninstall vue-cli -g/yarn global remove vue-cli卸載它。
Node.js8.9+
安裝vue-cli3.0 npm install -g @vue/cli 或者 yarn global add @vue/cli
版本是否是3.x vue --version/vue -V
通過vue-cli創建項目
創建項目命令
vue create 項目名; 項目名不建議存在大寫，中間用-隔開
這時候需要注意創建項目需要預先安裝的插件：
默認的會有Babel + ESLint；但是不建議默認，選擇下面：
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel //轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。
( ) TypeScript// TypeScript是一個JavaScript（后綴.js）的超集（后綴.ts）包含並擴展了 JavaScript 的語法，需要被編譯輸出為 JavaScript在瀏覽器運行，目前較少人再用
( ) Progressive Web App (PWA) Support// 漸進式Web應用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的狀態管理模式）
( ) CSS Pre-processors // CSS 預處理器（如：less、sass）
( ) Linter / Formatter // 代碼風格檢查和格式化（如：ESlint）
( ) Unit Testing // 單元測試（unit tests）
( ) E2E Testing // e2e（end to end） 測試
等待項目初始化完成。。。。。。
1.cd 到項目里
2.npm run serve 運行項目
或者使用圖形化界面創建項目：
vue ui
registerServiceWorker.js：這個就是service workers的配置文件,可以對sw的各個生命周期進修改。（這個一般用的少）
自定義配置文件：vue.config.js(固定)
創建好項目后會發現找不到webpack.config.js配置文件，這是vue-cli3不想讓我們隨意看到配置文件隱藏起來了，可以通過在根目錄下創建一個vue.config.js(名字固定)來添加我們的配置(在運行時會自動添加到webpack.config.js文件上)
vue.config.js配置項
三、vue-cli3中拉取vue-cli2
拉取 2.x 模板 (舊版本)
Vue CLI >= 3 和舊版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的 vue init 功能，你可以全局安裝一個橋接工具：
npm install -g @vue/cli-init
# `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同
vue init webpack my-project
https://cli.vuejs.org/zh/guide/creating-a-project.html
runtime+compiler和runtime-only的區別：在main.js文件中
/**
*等價於
render: function(h) {
return h(App);
}
等價於
render: function(createElement) {
return createElement('h2');
}
*/
1.如果在開發中使用的是template，就需要選runtime-compiler
2.如果在開發中使用的是.vue文件夾，就需要選runtime-only(比上面那種模式輕大約 6KB，但是 template (或任何特定於vue的html)只允許在.vue文件中使用——其他地方用需要 render 函數;.vue 文件中的template也是被 vue-template-compiler 翻譯成了render函數，所以只能在.vue里寫 template)
3.runtime-compiler的vue程序運行過程：
template---------------->ast------------->render---------------->vdom------------------>UI
(模板) 解析 (抽象語法樹) 編譯 (render函數) 形成 (虛擬DOM) 轉成 (真實DOM)
4.runtime-only的vue程序運行過程：
render------------------->vdom-------------->UI
(render函數) 形成 (虛擬DOM) 轉成 (真實DOM)
5.runtime-only的性能更高、代碼量更少
看了那么多的vue.js的安裝方式總結一下。如有不多請多多指教！希望給您帶來幫助！
參考文獻：https://blog.csdn.net/m0_37479246/article/details/78836686
————————————————
版權聲明：本文為CSDN博主「muzidigbig」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/muzidigbig/article/details/80490884