1. 程式人生 > >VUe+webpack構建單頁router應用(一)

VUe+webpack構建單頁router應用(一)

前期看了很多webpack的介紹,之前一直用requireJS或者browserify,真正決心來使用webpack,實在是因為webpack好像確實功能更全。

這期想做的是通過webpack和vue-router搭建一個單頁應用,並且將vue的transition元件加進去,做一個幻燈片的樣子。
首先,貼上我的環境。
這裡寫圖片描述

開始

step1:安裝vue cli

這裡寫圖片描述
推薦更改為cnpm(淘寶的映象),這樣下載要快一點。

生成專案

CMD輸入

vue init webpack-simple my-webpack-simple-demo

這裡寫圖片描述

然後可以一路回車,它會告訴你vue的版本是2.x,沒錯,我們就是要用vue2.0.
詢問你工程名,描述,以及所有人。
完成後,按照指示,進入檔案,並且npm 下載依賴項

這裡寫圖片描述
完畢後

npm run dev

瀏覽器會自動跳轉,沒錯,至此我們的環境搭建就算完成了。
這裡寫圖片描述

說明

這個時候我們可以來看一看檔案的目錄
這裡寫圖片描述

說一下這些檔案的作用
1、src資料夾
用於存放我們寫的原始碼
2、.gitignore
用於git上傳時,指定忽略一些檔案,比如build資料夾以及node_modules
3、index.html
這個就不用說了,就是我們瀏覽器開啟看到的頁面
4、package.json
這個是一些npm的一些配置檔案。
用於配置npm的命令,比如我們剛剛在命令列輸入的 npm run dev 其實就是在該檔案找到的。

 "dev":
"cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",

以及儲存一些依賴項,也就是說,如果之後要用到npm的時候,在後面新增字尾 –save-dev,就會自動儲存在”devDependencies”中。
如果別人使用你的專案,首先npm install,載入所有的依賴項。

5、readme
6、webpack.config.js
webpack的配置檔案。
其實自動化工具,諸如webpack就相當於我們程式的保姆,我們把一些瑣碎的事情丟給它,然後它來幫我們執行。但是它怎麼執行呢,肯定不能亂執行,所以我們需要給它一些命令。
這裡我們來看一下webpack的配置檔案。其實也很好理解。

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

我一點一點的來說:

 entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },

entry:指定了程式的入口檔案,告訴webpack原始檔在哪裡。
output:指定了程式的輸出檔案,告訴webpack把檔案解析後,放到哪裡,以及名字叫什麼(filename:’build.js’)

rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]

這裡定義了一些語法解析規則。
指定字尾名為.vue 的檔案通過vue-loader語法解析載入。
js檔案通過babel語法解析。
然後png/jpg/gif/svg通過檔案格式解析。
如果有人喜歡用sass的,也需要在這裡配置。

vue-router

簡單版的我就不寫了,回頭有時間寫一篇部落格。
首先安裝vue-router
這是我的目錄,App.vue算是我的主頁,components中存放的是我的小模組。main,js用來啟動路由,router-config.js 用來配置路由路徑
這裡寫圖片描述

App.vue檔案,沒什麼可說的,基本上照著官方API寫就好了

<template>
  <div id="app">
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header">
          <h2>Router Demo - 01</h2>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!--使用指令v-link進行導航-->
          <a class="list-group-item" v-link="{ path: '/home'}">Home</a>
          <a class="list-group-item" v-link="{ path: '/about'}">About</a>
          <router-link class="list-group-item" to="/Hello">Hello</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!--用於渲染匹配的元件-->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
  body {
    background-color: #f7f8f9;
  }
</style>

值得說明一下的是

          <a class="list-group-item" v-link="{ path: '/home'}">Home</a>
          <a class="list-group-item" v-link="{ path: '/about'}">About</a>
          <router-link class="list-group-item" to="/Hello">Hello</router-link>

這裡寫了兩種方法,前面兩種是vue1.x的寫法,後面一種是vue2.x的寫法,親測目前vue2.x對於兩種方式都支援。

main.js檔案

這裡踩坑就有點多了。

先上vue的官方檔案

vue1.x的router.start不再適用

router.start({
  template: '<router-view></router-view>'
}, '#app')

變得更簡單了,直接在Vue的例項中宣告router即可,就像宣告data、components一樣

new Vue({
  el: '#app',
  router: router,
  template: '<router-view></router-view>'
})

template是註冊元件。

template: '<router-view></router-view>'

或者這樣寫,也是沒問題的

new Vue({
  el: '#app',
  router: router,
  render: h => h('router-view')
})

router.map 也被取代了

之前的寫法

router.map({
  '/foo': {
    component: Foo
  },
  '/bar': {
    component: Bar
  }
})

因為沒有map了,所以router直接寫成陣列

var router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

先說上這兩個基本的,因此我的main.js的寫法是這樣的

import Vue from 'vue'
import VueRouter from "vue-router"
import Hello from './components/hello.vue'
import About from './components/About.vue'
import Home from './components/Home.vue'
Vue.use(VueRouter)

const routes = [{
    path: '/Hello',
    component: Hello
}, {
    path: '/Home',
    component: Home
}, {
    path: '/About',
    component: About
}];

const router = new VueRouter({
    routes // (縮寫)相當於 routes: routes
})

const App = Vue.extend(require('./App.vue'))

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

開啟,執行

npm run dev 

這裡寫圖片描述

總結

主要是網上的很多教程都是關於vue1.x版本的,踩了很多坑,終於搞明白了,第一步就是這麼完成了。
下面就可以接著探索router的更多好玩的東西了。

另外本教程的程式碼也都放在了我的git上面,最近慢慢寫,慢慢更新。

相關推薦

VUe+webpack構建router應用

前期看了很多webpack的介紹,之前一直用requireJS或者browserify,真正決心來使用webpack,實在是因為webpack好像確實功能更全。 這期想做的是通過webpack和vue-router搭建一個單頁應用,並且將vue的transit

Vue+webpack構建router應用

巢狀路由 其實很簡單,主要是vue2.0有一些變更。 所以要多看API文件,少看網上的教程 = = 配置路由 配置路由,這裡為Home配置了兩個子路由news和message const routes = [{ path: '/Hello'

require.js實現web應用SPA

ble 簡單實用 net con lar avi github cal com 本文轉載自:https://blog.csdn.net/qq_33401924/article/details/53815922 移動端單頁應用基本上是做移動端最流行的的方式了,但是對於很多

手把手教你用vue-cli、webpackvue-routervue-resource構建應用SPA

vue-cli webpack vue-router vue-resource vue-cli:一個官方釋出 vue.js 專案腳手架,使用 vue-cli 可以快速建立 vue 專案 webpack:是當下最熱門的前端資源模組化管理和打包工具。它可以將

vue+webpack構建頁面應用筆記不斷更新中。。。

1. 配置子路由以及預設讓某個子路由顯示 routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, {

如何使用Vuex+Vue.js構建應用

前言:在最近學習 Vue.js 的時候,看到國外一篇講述瞭如何使用 Vue.js 和 Vuex 來構建一個簡單筆記的單頁應用的文章。感覺收穫挺多,自己在它的例子的基礎上進行了一些優化和自定義功能,在這裡和大家分享下學習心得。 在這篇教程中我們將通過構建一個筆記應用來

webpack從零開始構建項目mpa

www .html log targe 環境 分開 webpack 支持 博客 歷時一個星期左右,自己參考webpack官網等,從零開始構建webpack項目。本次的博客也是對前面的webpack項目搭建一文的補充。 在本wepack搭建的項目中,自己實現了下面的這些功

.net core + vue開發單應用

背景 .net core 與 vue 的簡介不再贅述,目前使用vue開發基本分為幾種情況: 使用webpack進行純前端開發傳統的web應用中使用vue,主要使用vue的物件模型繫結 對於使用傳統的web+vue進行單頁面應用開的幾乎沒有找到例子,因此決定自己動手嘗試,

WCF學習——構建一個簡單的WCF應用

frame port app 位置 協定 enc splay msdn ons 本文的WCF服務應用功能很簡單,卻涵蓋了一個完整WCF應用的基本結構。希望本文能對那些準備開始學習WCF的初學者提供一些幫助。 在這個例子中,我們將實現一個簡單的計算器和傳統的分布式通信框架一樣

Vue-router學習- 路由匹配

vue 配置 npm class () ons mount 配置路由 方法 一、Vue-router引入使用 Vue-router就是一個vue路由類,通過new一個Vue路由實例,然後Vue.use()嵌入即可。 一般分為以下步驟: 1.引入 (1)、方法一:n

axios在vue中的應用—— 簡單呼叫

目錄 1. 安裝並引入axios 1.1 使用 npm/cnpm 安裝 1.2 在main.js檔案中引入axios 2. 使用axios請求本地json檔案 3. 將傳遞的json資料轉為FormData 3.1 引入qs 3.2 新增請求攔截器,將axios

Flutter入門教程:從零構建電商應用

在這個系列中,我們將學習如何使用google的移動開發框架flutter建立一個電商應用。 本文是flutter框架系列教程的第一部分,將學習如何安裝Flutter開發環境並建立第一個 Flutter應用,並學習Flutter應用開發中的核心概念,例如widget、狀態等。 本系列教

【Flutter教程】從零構建電商應用

在這個系列中,我們將學習如何使用google的移動開發框架flutter建立一個電商應用。本文是flutter框架系列教程的第一部分,將學習如何安裝Flutter開發環境並建立第一個Flutter應用,並學習Flutter應用開發中的核心概念,例如widget、狀態等。 本系列教程包含如下四個部分,敬請期待:

【Flutter入門教程】從零構建電商應用

在這個系列中,我們將學習如何使用google的移動開發框架flutter建立一個電商應用。本文是flutter框架系列教程的第一部分,將學習如何安裝Flutter開發環境並建立第一個Flutter應用,並學習Flutter應用開發中的核心概念,例如widget、狀態等。 本系列教程包含如

vue+webpack4建立應用練習

新建資料夾webpacktest 初始化專案 npm init 會出現選項練習專案一律預設即可,會生成package.json 安裝 npm i webpack vue vue-loader 會出現WARN npm WARN [email pr

vue+cordova建立Hybird混合應用----從安裝到輸出第一個應用

為什麼寫這篇文章呢?因為這是一種構建簡單跨平臺移動應用的便捷方式。個人認為這比React Native簡單的多,很容易上手。解決小型應用綽綽有餘。 1、安裝java 2、安裝node.js 4、安裝android studio 安裝android stu

Storm概念、原理詳解及其應用BaseStorm

when 結構 tails 並發數 vm 虛擬機 cif 異步 優勢 name 本文借鑒官文,添加了一些解釋和看法,其中有些理解,寫的比較粗糙,有問題的地方希望大家指出。寫這篇文章,是想把一些官文和資料中基礎、重點拿出來,能總結出便於大家理解的話語。與大多數“wordc

vuex實踐之路——筆記本應用

time 中大 -- this 隔離 思想 一個表 環境搭建 一定的 首先使用vue-cli把環境搭建好。 介紹一下應用的界面。 App.vue根組件,就是整個應用的最外層 Toolbar.vue:最左邊紅色的區域,包括三個按鈕,添加、收藏、刪除。 NoteList.vu

構建之法--探索篇

構建 編寫 裏的 set namespace 對象 之前 定義 時也 問題一: 在Cust中無法找到telephone的get方法,這裏是因為我之前沒有telephone的成員變量,加上之後有沒有寫telephone的get方法; 解決方案:只要在Cust這個類裏面,加上

OPENCV----在APP性能測試中的應用

核心 color frame pan ems span urn sqrt || 應用項目: APP的性能測試 應用場景: APP啟動速度 視頻開播速度 加載速度 等~~ 緣來: 基於APP日誌和UiAutomator的測試方案,測試結果不能直白且精確的