8.1. 前置知識學習
- npm 學習
有時間專門寫一個這樣的專題，如果需要可以郵件我。malun666@126.com
-
webpack基礎學習
- 官方文檔
- Webpack了解的知識點：
- webpack的基本配置
- 了解webpack常用的loader： less-loader、sass-loader、 vue-loader、style-loader、css-loader、eslint-loader、babel-loader等
- 熟悉Webpack的webpack-dev-server的基本配置和使用，會配置熱更新
-
es6語法學習
- 阮一峰老師的大作《ECMAScript 6 入門》
- 需要學習的知識點
- es6的模塊機制
- 各種最新語法糖，簡寫、geter、setter、箭頭函數
- 類、繼承的心機制 ...
-
nodejs基礎知識
- 知識點學習：
- 文件操作
- http服務
- express
- 知識點學習：
-
組件化開發思想
8.2. Vue腳手架工具：vue-cli構建實戰項目
其實如果編寫Vue的前端項目，直接使用vue的官方vue-cli構建工具最好用，一個命令就可以直接生成項目的結構和目錄。 而且官方需要依賴的包也可以自動配置好，只需要npm instal一下，然后就可以開發測試了。
8.2.1. vue-cli安裝
# 安裝vue-cli。 安裝之前首先確保你已經安裝好了nodejs 而且打開命令行
$ npm install -g vue-cli
# 校驗一下是否安裝成功
$ vue -V
#=> 2.5.1 我當前的版本是這個，你的可能比這個新
8.2.2. 使用vue-cli初始化項目
通過以下命令的方式可以創建一個項目文件夾，並初始化對應的文件。
$ vue init <template-name> <project-name>
其中template-name可以取以下值，每個值對應不同的項目構建的模板。
- webpack--全功能的Webpack + vueify，包括熱加載，靜態檢測，單元測試
- webpack-simple--一個簡易的Webpack + vueify，以便於快速開始。
- browserify--全功能的Browserify + vueify，包括熱加載，靜態檢測，單元測試
- browserify-simple--一個簡易的Browserify + vueify，以便於快速開始。
安裝和開發控制台的命令：
# 如果已經安裝，請省略
$ npm install -g vue-cli
# 初始化一個webpack全功能包的vue項目，請您把my-project換成你自己的項目名。
$ vue init webpack my-project
# 用命令行進入當前項目目錄
$ cd my-project
# npm安裝所有的依賴的包
$ npm install
# 運行測試的首頁
$ npm run dev
8.2.3. 綜合實例開發記錄
- 通過vue-cli構建工具初始化項目目錄
安裝過程，控制台會問你項目名稱是什么？項目描述？項目作者，是否使用eslint校驗，是否使用單元測試等....
我的安裝過程如下請參考：
$ vue init webpack ttl # => 安裝webpack模板的項目 ttl（項目名可以隨便取）
A newer version of vue-cli is available.
latest: 2.6.0
installed: 2.5.1
This will install Vue 2.x version of template.
For Vue 1.x use: vue init webpack#1.0 ttl
? Project name mydemovue # => 項目名稱
? Project description A Vue.js project # => 項目描述
? Author malun <malun666@126.com> # => 作者
? Vue build standalone # => 是否支持單文件組件
? Use ESLint to lint your code? Yes # => 是否支持ESLint代碼校驗
? Pick an ESLint preset Standard # => 校驗的標准是什么？
? Setup unit tests with Karma + Mocha? Yes # => 是否使用單元測試
? Setup e2e tests with Nightwatch? Yes # => 是否使用e2e測試
vue-cli · Generated "ttl".
To get started:
cd ttl
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
通過上面一系列的命令后，我們就會創建一個webpack配置好的項目包。目錄結構如下：
ttl
|--.babelrc #=> babel的配置文件，主要用於轉換es6等最新的js語法。
|--.editorconfig #=> 編輯器配置
|--.eslintignore #=> eslint的忽略校驗的配置文件
|--.eslintrc.js #=> eslint的配置校驗js是否規范的配置文件
|--.gitignore #=> 設置git忽略的管理的文件
|--README.md #=> readme說明文件
|--build/ #=> 自動構建存放的文件地方
|--config/ #=> 當前開發、測試等配置的文件，需要懂點nodejs了啊。
|--index.html #=> 項目的主入口的模板
|--package.json #=> npm的配置文件
|--src/ #=> 源碼目錄
|--static/ #=> 靜態資源存放的目錄
|--test/ #=> 測試相關目錄
- 初始化依賴包
$ cd ttl #=> 進入上面創建好的項目目錄
$ npm install #=> 安裝所有的依賴包。 安裝過程可能非常長，網絡也可能有問題，請耐心等待。
# 安裝完成后，可以直接運行測試,如果自動打開瀏覽器，並跳轉到http://localhost:8080/ 說明一切都ok了。
$ npm run dev
npm 安裝的時候經常網會斷開，國內的網（哎，說多了都是淚）你懂的。最好能科學上網，或者是用淘寶的npm的鏡像
- 安裝
vue-router組件
$ npm i -S vue-router
-
到項目的
/src/components/目錄下創建三個組件文件。
分別是：
-
首頁組件
<template> <div class="home"> <h3>{{ msg }}</h3> </div> </template> <script> export default { name: 'home', // 組件可以有自己的名字。 data () { // 組件的data必須是函數 return { msg: '這里是Home視圖' } } } </script> <style scoped> h3 { background-color: #82c; } </style> -
用戶首頁組件
<template> <div> <h3>{{ msg }}</h3> </div> </template> <script> export default { // es6的模塊導出定義語法，此模塊導出默認的對象 name: 'user', // 組件可以有自己的名字。 data () { // 組件的data必須是函數 return { msg: '這里是User視圖' } } } </script> <style scoped> h3 { background-color: red; } </style> -
產品組件
<template> <div class="product"> <h3>{{ msg }}</h3> </div> </template> <script> export default { name: 'product', // 組件可以有自己的名字。 data () { // 組件的data必須是函數 return { msg: '這里是Home視圖' } } } </script> <style scoped> h3 { background-color: green; } </style>
項目的目錄結構為：
ttl
|-- src
|--|-- Hello.vue
|--|-- Home.vue
|--|-- Product.vue
|--|-- User.vue
- 創建router對象及配置路由
在src目錄下創建approuter.js文件。 然后添加如下代碼：
import VueRouter from 'vue-router' // 導入路由模塊
import Home from './components/Home.vue' // 導入Home組件
import User from './components/User.vue'
import Product from './components/Product.vue'
export default new VueRouter({ // 定義路由規則對象
routes: [
{path: '/home', component: Home},
{path: '/user/:id', component: User},
{path: '/product/:id', component: Product}
]
})
- 修改main.js文件 找到
src/目錄下的main.js文件， 共修改4處，添加路由引用、添加路由規則對象導入、啟用路由、將路由鍵入到Vue中。
修改此文件為：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router' // +++1、導入路由組件
import router from './approuter' // +++2、導入我們自己寫的路由配置文件
// +++ 3、使用路由組件
Vue.use(VueRouter)
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App },
router: router // +++4、添加路由對象
})
- 在app.vue中添加路由導航
最終代碼如下：
<template>
<div id="app">
<nav class="top-menu">
<ul >
<li v-for="item in menuList">
<router-link :to="item.url">{{ item.name }}</router-link>
</li>
</ul>
</nav>
<hr>
<div>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data: function () {
return {
menuList: [
{ name: '首頁', url: '/home' },
{ name: '用戶', url: '/user/19' },
{ name: '產品', url: '/product/20' }
]
}
}
}
</script>
<style>
#app {
}
.top-menu ul, .top-menu li {
list-style: none;
}
.top-menu {
overflow: hidden;
}
.top-menu li {
float: left;
width: 100px;
}
</style>
刷新一下瀏覽器，你將會看到最終的運行結果。
聯系老馬
對應視頻地址：https://chuanke.baidu.com/s5508922.html
老馬qq： 515154084
老馬微信：請掃碼
微信：Flydragon_malun 或者18911865673