Vue.js是什麼?
- Vue.js是一套構建用戶界面的漸進式框架。
- Vue 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件
- Vue 只關注視圖層， 採用自底向上增量開發的設計。
Vue.js安裝
-
獨立版本
我們可以在 Vue.js 的官網上直接下載 vue.min.js 並用 <script> 標籤引入。
-
使用CDN方法(也是用 <script> 標籤引入，免去下載步驟)
這裏有三個CDN：
- Staticfile CDN（國內） : https://cdn.staticfile.org/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
-
npm安裝vue（推薦）
在用 Vue.js 構建大型應用時推薦使用 npm安裝：(默認已經安裝nodejs，附上nodejs下載地址和nodejs安裝教程）
先認識一下npm是什麼：
npm其實是Node.js的包管理工具（package manager)。npm可以根據依賴關係，把所有依賴的包都下載下來並管理起來。那麼npm究竟在哪？其實它已經在Node.js安裝的時候順帶裝好了。
檢查一下是否已經安裝npm
//命令行查看一下版本
G:\>npm -v
6.7.0
npm安裝vue
# 最新穩定版
$ npm install vue -->確保已經安裝nodejs
那麼Vue-cli又是什麼？
Vue 提供了一個官方的 CLI，爲單頁面應用快速搭建 (SPA) 繁雜的腳手架。CLI (@vue/cli) 是一個全局安裝的 npm 包，提供了終端裏的 vue 命令。更多詳情可查閱 Vue CLI 的文檔。
安裝Vue-cli3.0
cmd命令行下執行如下命令
G:\vueTest>npm install -g @vue/cli
如果你看到別的文章寫的安裝命令是：
npm install -g vue-cli
- 千萬別那樣做,因爲vue-cli是基於1.x或者2.x。
- Vue-cli 的包名稱由 vue-cli 改成了 @vue/cli
- 如果你已經全局安裝了舊版本的 vue-cli (1.x 或 2.x)，你需要先通過 npm uninstall vue-cli -g 或
yarn global remove vue-cli 卸載它。
PS：如果npm下載過慢，可以選擇npm換源：換源教程
安裝完成後cmd命令行檢查版本
G:\vueTest>vue -V
@vue/cli 4.0.5
創建項目
創建項目方法1：Vue-cli3.0命令行下創建新項目
Step1: cmd命令行下執行如下命令（hello-word爲自定義項目名稱）
vue create hello-world
Step2: 你會被提示選取一個 preset。你可以選默認的包含了基本的 Babel + ESLint 設置的 preset，也可以選“手動選擇特性”來選取需要的特性。
Vue CLI v4.0.5
? Please pick a preset:
demo (babel, router, vuex)
> default (babel, eslint)
Manually select features
這裏我們選擇默認的設置，而手動設置則提供了更多的選項，它們是面向生產的項目更加需要的。
Step3: 創建項目成功
🎉 Successfully created project hello-world.
👉 Get started with the following commands:
$ cd hello-world
$ npm run serve
Step4：運行項目
G:\vueTest>cd hello-world
G:\vueTest\hello-world>npm run serve
> [email protected] serve G:\vueTest\hello-world
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
DONE Compiled successfully in 5577ms 19:21:30
App running at:
- Local: http://localhost:8080/
- Network: http://10.18.45.72:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
創建項目方法2：圖形界面創建新項目（推薦，基於Vue-cli3.0）
Step1：通過 vue ui 命令以圖形化界面創建和管理項目
vue ui
上述命令會打開一個瀏覽器窗口，並以圖形化界面將你引導至項目創建的流程,如下圖所示，按步驟來創建項目。
Step2：創建項目完成後：
查看項目名是否正確–>點擊任務–>點擊運行（需等待編譯完成）–>點擊啓動app，即完成啓動項目。
創建項目方法3：基於Vue-cli1.x或2.x創建新項目
Step1:
創建一個基於 webpack 模板的新項目：（mytest爲自定義項目名稱）
G:\vueTest>vue init webpack mytest
Command vue init requires a global addon to be installed.
Please run npm install -g @vue/cli-init and try again.
這裏因爲我們已經安裝了Vue-cli3.x，但是Vue CLI >= 3 和舊版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的 vue init 功能，你可以全局安裝一個橋接工具（即@vue/cli-init）：
G:\vueTest>npm install -g @vue/cli-init
接着，重複Step1，這裏需要進行一些配置，默認回車即可。
G:\vueTest>vue init webpack mytest
'git' is not recognized as an internal or external command,
operable program or batch file.
? Project name mytest
? Project description A Vue.js project
? Author Blackspace
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No -->這裏建議選擇No
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) no -->這裏建議選擇No
vue-cli · Generated "mytest".
# Project initialization finished!
# ========================
To get started:
cd mytest
npm install (or if using yarn: yarn)
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
Step2:–>運行項目
G:\vueTest>cd mytest -->進入項目目錄
G:\vueTest\mytest>npm intall -->安裝依賴
G:\vueTest\mytest>npm run dev -->運行項目
網址欄輸入localhost:8080,成功。
