使用Vue CLI腳手架構建專案
命令列工具 (CLI)
https://cn.vuejs.org/v2/guide/installation.html#命令列工具-CLI
Vue 提供了一個官方的 CLI，為單頁面應用 (SPA) 快速搭建繁雜的腳手架。它為現代前端工作流提供了 batteries-included 的構建設定。只需要幾分鐘的時間就可以執行起來並帶有熱過載、儲存時 lint 校驗，以及生產環境可用的構建版本。更多詳情可查閱 Vue CLI 的文件。
初始化專案
安裝 cli 命令工具：
npm install -g @vue/cli @vue/cli-init
安裝成功後，使用 vue -V 命令，檢視版本號；
vue -V
使用 vue init webpack myapp 構建一個名為 myapp 的專案
vue init webpack myapp
Vue 依然使用詢問的方式，讓我們對專案有一個初始化的資訊
- Project name：專案名
- Project description: 專案描述
- Author: 作者
- Vue build： vue版本
- 第一種：配合大部分的開發人員(完整版 standalone)Runtime+Compiler
- 第二種：僅僅中有
Runtime-only
Runtime-only版本字面意思是只包含執行時版本，是在構建時通過webpack的vue-loader工具將模板預編譯成JavaScript，也就是進行了預編譯，在最終打好的包裡實際上是已經編譯好的，在瀏覽器中可直接執行
Runtime+Compiler字面意思為執行時+編譯器，是不在打包時進行編譯的，是在客戶端（瀏覽器）執行時進行編譯的，所以要使用帶編譯器的完整版本
-
Install vue-router? 是否安裝vue-router
-
Use ESLint to lint your code?是否使用ESLint來驗證我們的語法。(建議否)
-
Pick an ESLint preser:使用哪種語法規範來檢查我們的程式碼：
- Standard: 標準規範
- Airbnb: 愛彼迎規範
-
Set up unit test: 設定單元測試
-
Setup e2e tests： 設定端對端測試
-
Should we run 'npm install':要不要幫忙你下載這個專案需要的第三方包
- 使用npm來下載
- 使用yarn來下載
例
安裝完成
To get started:
cd myapps
npm run dev // 使用命令啟動專案
-----
Your application is running here: http://localhost:8080
開啟瀏覽器，訪問 http://localhost:8080
看到瀏覽器的歡迎介面，表示專案執行成功
啟動專案
cd myapps
npm run dev // 使用命令啟動專案
有此頁面表示
生成專案結構介紹
├── build webpack打包相關配置檔案目錄
├── config webpack打包相關配置檔案目錄
├── node_modules 第三方包
├── src 專案原始碼(主戰場)
│ ├── assets 儲存靜態資源，例如 css、img、fonts
│ ├── components 儲存所有公共元件
│ ├── router 路由
│ ├── App.vue 單頁面應用程式的根元件
│ └── main.js 程式入口，負責把根元件替換到根節點
├── static 可以放一些靜態資源
│ └── .gitkeep git提交的時候空資料夾不會提交，這個檔案可以讓空資料夾可以提交
├── .babelrc 配置檔案，es6轉es5配置檔案，給 babel 編譯器用的
├── .editorconfig 給編輯器看的
├── .eslintignore 給eslint程式碼風格校驗工具使用的，用來配置忽略程式碼風格校驗的檔案或是目錄
├── .eslintrc.js 給eslint程式碼風格校驗工具使用的，用來配置程式碼風格校驗規則
├── .gitignore 給git使用的，用來配置忽略上傳的檔案
├── index.html 單頁面應用程式的單頁
├── package.json 專案說明，用來儲存依賴項等資訊
├── package-lock.json 鎖定第三方包的版本，以及儲存包的下載地址
├── .postcssrc.js 給postcss用的，postcss類似於 less、sass 前處理器
└── README.md 專案說明文件
關於嚴格模式
http://javascript.ruanyifeng.com/advanced/strict.html
嚴格模式主要有以下限制。
-
變數必須聲明後再使用
-
函式的引數不能有同名屬性，否則報錯
-
不能使用
with語句 -
不能對只讀屬性賦值，否則報錯
-
不能使用字首 0 表示八進位制數，否則報錯
-
不能刪除不可刪除的屬性，否則報錯
-
不能刪除變數
delete prop，會報錯，只能刪除屬性delete global[prop] -
eval不會在它的外層作用域引入變數 -
eval和arguments不能被重新賦值 -
arguments不會自動反映函式引數的變化 -
不能使用
arguments.callee -
不能使用
arguments.caller -
禁止
this指向全域性物件 -
不能使用
fn.caller和fn.arguments獲取函式呼叫的堆疊 -
增加了保留字（比如
protected、static和interface）
看生成的程式碼之前知識儲備
ES6模組化
http://es6.ruanyifeng.com/#docs/module
總結：
- CommonJS 模組輸出的是一個值的拷貝，ES6 模組輸出的是值的引用；
- CommonJS 模組是執行時載入，ES6 模組是編譯時輸出介面；
- ES6 的模組自動採用嚴格模式，不管你有沒有在模組頭部加上
"use strict";； - ES6 模組之中，頂層的
this指向undefined；CommonJS 模組的頂層this指向當前模組；
vue單檔案元件
https://cn.vuejs.org/v2/guide/single-file-components.html
在很多 Vue 專案中，我們使用 Vue.component 來定義全域性元件，緊接著用 new Vue({ el: '#container '}) 在每個頁面內指定一個容器元素。
這種方式在很多中小規模的專案中運作的很好，在這些專案裡 JavaScript 只被用來加強特定的檢視。但當在更復雜的專案中，或者你的前端完全由 JavaScript 驅動的時候，下面這些缺點將變得非常明顯：
- 全域性定義 (Global definitions) 強制要求每個 component 中的命名不得重複
- 字串模板 (String templates) 缺乏語法高亮，在 HTML 有多行的時候，需要用到醜陋的
\ - 不支援 CSS (No CSS support) 意味著當 HTML 和 JavaScript 元件化時，CSS 明顯被遺漏
- 沒有構建步驟 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用前處理器，如 Pug (formerly Jade) 和 Babel
副檔名為 .vue 的 single-file components (單檔案元件) 為以上所有問題提供瞭解決方法，並且還可以使用 webpack 或 Browserify 等構建工具。
程式碼載入執行流程
main.js
// 入口檔案
// 以es6模組的方式引入 vue APP router 三個模組;沒有路徑去node_modules目錄中找
import Vue from 'vue'
//有路徑按照路徑查詢
import App from './App'
//匯入router ，在當前目錄下找到router目錄下的index.js
import router from './router'
Vue.config.productionTip = false;
/* eslint-disable no-new */
//建立vue例項物件
new Vue({
// 獲取節點物件
el: '#app',
// 引入路由
router,
// 本例項的私有元件
components: { App },
// el 與 template 在同一個例項中出現，
// 根據生命週期的執行順序可知，template中的內容會替換el選中的內容
template: '<App/>'
})
App.vue 單檔案元件
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
因為main.js中
import App from './App'
new Vue({
// 獲取節點物件
el: '#app',
// 引入路由
router,
// 本例項的私有元件
components: { App },
// el 與 template 在同一個例項中出現，
// 根據生命週期的執行順序可知，template中的內容會替換el選中的內容
template: '<App/>'
})
相當於vue例項的components屬性變成了
components: { App:{App.vue單檔案元件內容} },
roter/index.js vue路由
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// Vue 中外掛引入語法
// https://cn.vuejs.org/v2/guide/plugins.html
Vue.use(Router)
// ES6模組匯出語法
export default new Router({
routes: [
// 定義一個路由規則
{
path: '/', // 請求路徑
name: 'HelloWorld', // 路由名稱標識
component: HelloWorld //請求此路由時，使用的元件
}
]
})
components/HelloWorld.vue
export default {
// 模組名字
name: 'HelloWorld',
// 元件中 data 資料必須是一個有返回值的方法
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
大致流程
(main.js->template: '<App/>')替換 (index.html->div#app);
(index.html-><App/>) --> (components: { App })
( components: { App }) --> (import App from './App' -> src/App.vue)
(App.vue -> <router-view/> -> 路由元件) --> (main.js-> router)
========此項決定了頁面展示那個元件內容 ========
({path: '/',name: 'HelloWorld', component: HelloWorld }) --> (import HelloWorld from '@/components/HelloWorld')
(src/components/HelloWorld.vue) --> <router-view/>
新增自己的路由元件
在 components 資料夾中新增 MyRouter.vue 檔案，寫自己的元件程式碼：
<template>
<div class="mypage">
{{mydatas}}
</div>
</template>
<script>
// 模組化匯出
export default {
data(){
return {mydatas:'lksadjflks'}
}
}
</script>
<style>
.mypage{
width: 200px;
height: 50px;
background: pink
}
</style>
修改 router/index.js ，新增自己的路由
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 引入(匯入) 元件
import MyRouter from '@/components/MyRouter'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
// 新增自己的路由及元件
{
path:'/myrouter',
name:'MyRouter',
component:MyRouter
}
]
})
效果