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、webpack、vue-router、vue-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的測試方案,測試結果不能直白且精確的