vue2.0怎样开发多页面
这次给大家带来vue2.0怎样开发多页面，vue2.0开发多页面的注意事项有哪些，下面就是实战案例，一起来看一下。
我们平常用vue开发的时候总觉得vue好像就是专门为了单页面应用而诞生的，其实不是。因为vue在工程化开发的时候很依赖webpack，而webpack是将所有的资源整合到一块，弄成一个单页面。但是vue不止可以做单页面，它还可以做多页面，如果要做多页面的话需要对他的依赖，也就是webpack就是重新配置才可以。本文将详细讲webpack的配置。
vue的开发有两种，一种是直接的在script标签里引入vue.js文件即可，这样子引入的话个人感觉做小型的多页面会比较舒坦，一旦做大型一点的项目，还是离不开webpack。所以另一种方法也就是基于webpack和vue-cli的工程化开发。下面详解步骤。
先声明，如果用vue进行工程化开发，首先要有node.js，然后再下一个npm，不过一般新版的node都会有npm所以可以不用弄。指令是在命令行里输入。首先第一步就是生成一个vue项目，用指令：
vue init webpack test
博主本人声明的文件名为test，下载好后一路enter，之后便生成了一个vue项目，但是这个vue项目还没有一些相关的依赖，这个时候需要进入到该文件夹里面，输入指令：
npm install
如果网速不好，则用cnpm install，效果一样。略等几分钟后整个依赖便已经下完，之后输入指令：
npm run dev
则会自动打开一个界面，如果报错不能打开网页的话只有一种原因，那就端口占用，这个时候需要到/config/index.js目录下改端口就行。
当一个vue项目完成好所有的配置后，接下来就是我们的重点了，首先我们新新建几个html文件，博主我新建了一个one.html和two.html，及其与之对应的vue文件和js文件，文件目录如下：
弄好之后我们进入buildwebpack.base.conf.js目录下，在module.exports的域里，找到entry，在那里配置添加多个入口：
entry: {
app: './src/main.js',
one: './src/js/one.js',
two: './src/js/two.js'
},
注意，紫色部分的变量名要起好，因为后面要用到，以防忘记。
接下来就是对开发环境run dev里进行修改，打开buildwebpack.dev.conf.js文件，在module.exports那里找到plugins，下面写法如下：
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
chunks: ['app']
}),
new HtmlWebpackPlugin({
filename: 'one.html',
template: 'one.html',
inject: true,
chunks: ['one']
}),
new HtmlWebpackPlugin({
filename: 'two.html',
template: 'two.html',
inject: true,
chunks: ['two']
}),
new FriendlyErrorsPlugin()
]
在chunks那里的app指的是webpack.base.conf.js的entry那里与之对应的变量名。chunks的作用是每次编译、运行时每一个入口都会对应一个entry，如果没写则引入所有页面的资源。
之后就对run build也就是编译环境进行配置。首先打开configindex.js文件，在build里加入这个：
index: path.resolve(dirname, '../dist/index.html'),
one: path.resolve(dirname, '../dist/one.html'),
two: path.resolve(dirname, '../dist/two.html'),
然后打开/build/webpack.prod/conf.js文件，在plugins那里找到HTMLWebpackPlugin，然后添加如下代码：
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency',
chunks: ['manifest', 'vendor', 'app']
}),
new HtmlWebpackPlugin({
filename: config.build.one,
template: 'one.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks: ['manifest', 'vendor', 'one']
}),
new HtmlWebpackPlugin({
filename: config.build.two,
template: 'two.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks: ['manifest', 'vendor', 'two']
}),
其中filename引用的是configindex.js里的build，每个页面都要配置一个chunks，不然会加载所有页面的资源。
然后one.js文件可以这样写：
import Vue from 'vue'
import one from './one.vue'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#one',
render: h => h(one)
})
one.vue写法如下：
<template>
<p id="one">
{{msg}}
</p>
</template>
<script>
export default {
name: 'one',
data () {
return {
msg: 'I am one'
}
}
}
</script>
two的写法与之类似，所以不写下来了，
然后App.vue里通过这样写：
<template>
<p id="app">
<a href="one.html" rel="external nofollow" >one</a><br>
<a href="two.html" rel="external nofollow" >two</a><br>
{{msg}}
</p>
</template>这样子当你打开页面的时候，点击上面one的链接就会跳转到one.html，点击two就跳转到two.html。这样子就大功告成了。
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
JS提示文本框邮箱地址补全
$.ajax()方法怎样从服务器里获取json数据
绛旓細棣栧厛绗竴姝ュ氨鏄敓鎴愪竴涓vue椤圭洰锛岀敤鎸囦护锛歷ue init webpack test鍗氫富鏈汉澹版槑鐨勬枃浠跺悕涓簍est锛屼笅杞藉ソ鍚庝竴璺痚nter锛屼箣鍚庝究鐢熸垚浜嗕竴涓獀ue椤圭洰锛屼絾鏄繖涓獀ue椤圭洰杩樻病鏈変竴浜涚浉鍏崇殑渚濊禆锛岃繖涓椂鍊欓渶瑕佽繘鍏ュ埌璇ユ枃浠跺す閲岄潰锛岃緭鍏ユ寚浠わ細npm install濡傛灉缃戦熶笉濂斤紝鍒欑敤cnpm install锛屾晥鏋滀竴鏍枫傜暐绛夊嚑鍒嗛挓鍚庢暣涓緷...
绛旓細浣跨敤VUE鎼缓澶氶〉闈㈠簲鐢紝瀹炵幇鍏徃鍏变韩椤甸潰鐨勯渶姹銆傛墍鏈夌郴缁熼兘鍦ㄥ悓涓鐩綍涓嬶紝閰嶇疆澶氬叆鍙ｅ鍑哄彛銆傚悇绯荤粺闂村彲浠ラ摼鎺ワ紝浣嗘槸鍚勭郴缁熷唴閮ㄤ緷鐒堕噰鐢⊿PA妯″紡寮鍙戙傚皢鎵鏈夌郴缁熺殑鍏叡缁勪欢鍜屾柟娉曟斁鍦ㄧ郴缁熺洰褰曠殑鏈澶栧眰锛屼互杈惧埌澶嶇敤鐨勭洰鐨勩傚湪绯荤粺鍐呴儴渚濈劧鍙互鍗曠嫭灏佽绉佹湁缁勪欢锛岃繖鏍峰彲浠ユ渶澶ч檺搴︾殑鎻愰珮缁勪欢鐨勫鐢ㄦс傚悇绯荤粺鍗曠嫭...
绛旓細棣栧厛锛屾垜浠潵鐞嗚В娓愯繘寮忔鏋躲傚畠鍊″鐨勬槸閫夋嫨鎬т娇鐢紝鑰岄潪鍏ㄩ潰缁戝畾銆傝繖鎰忓懗鐫鍦ㄤ娇鐢ㄦ鏋舵椂锛屾垜浠笉蹇呰鍏舵墍鏈夌壒鎬ф潫缂氾紝鍙互鏍规嵁椤圭洰闇姹傦紝閫夋嫨鎬у湴閲囩敤銆Vue 2.0姝ｆ槸杩欐牱鐨勪唬琛紝瀹冧笉浼氬己鍒朵綘閲囩敤鐗瑰畾鐨勭紪绋嬭寖寮忥紝浣犲彲浠ュ儚浣跨敤jQuery閭ｆ牱锛屽彧鍦ㄩ渶瑕佺殑鍦版柟寮曞叆锛屼篃鍙互閫夋嫨鍏ㄥ妗跺紡寮鍙锛屽氨鍍廇ngular閭ｆ牱鍏ㄩ潰...
绛旓細鍙互锛屾瘡涓椤甸潰褰撲綔涓涓粍浠跺氨琛屼簡銆
绛旓細vue-tao-admin 鍓嶅悗绔敱https璁块棶鏀逛负http璁块棶 https://www.lingchen.kim/tao_admin_doc 鍗氬鍦板潃锛 https://www.lingchen.kim/ 濡傛灉瑙夊緱椤圭洰瀵逛綘鏈夊府鍔╋紝楹荤儲缁欎釜star 涓板瘜鐨勫竷灞妯″紡鍙夋嫨锛屽竷灞鍜屽姛鑳藉叿鏈夐珮鍙厤鎬э紱鏀寔椤舵爮鑿滃崟鍜屼晶杈规爮鑿滃崟锛堜晶杈硅彍鍗曡嚜鍔ㄥ搷搴旈《鏍忚彍鍗曞彉鍖栵紝鏀寔鍔ㄦ佽彍鍗曪級锛涙紓浜...
绛旓細1銆vue-cli3.o绉婚櫎浜哻onfig.鏂囦欢澶广2銆佸浜唙ue.config.js鏂囦欢銆3銆佹柊澧炰簡涓涓獀iews鏂囦欢澶广4銆佸垹闄や簡static鏂板浜唒ublic鏂囦欢澶广5銆乮ndex.html绉诲姩鍒皃ublic浜嗐傞厤缃」涓嶅悓 1銆乿ue-cli2.0鐨勫煙鍚嶉厤缃紝鍒嗕负寮鍙鐜鍜岀敓浜х幆澧冦2銆佹墍浠ラ厤缃煙鍚嶆椂锛岄渶瑕佸湪config涓殑dev.env.js鍜屻3銆乸rod.env.js...
绛旓細``鍦ㄤ笂杩颁唬鐮佷腑锛屾垜浠氳繃`methods`灞炴у畾涔変簡涓涓悕涓篳addNumber`鐨勬柟娉曘傚綋鐢ㄦ埛鐐瑰嚮鎸夐挳鏃讹紝璋冪敤鏂规硶浼氬皢椤甸潰涓婃樉绀虹殑鏁板瓧鍔1銆傚洜姝わ紝浣跨敤Vue鐨寮鍙鑰呴氬父浼氶氳繃瀹氫箟澶氫釜涓嶅悓鐨勬柟娉曟潵瀹炵幇澶嶆潅椤甸潰浜や簰銆佹暟鎹鐞嗙瓑鍔熻兘銆俛i.aimpcapbp.top 鍙互瑙ｇ瓟浣犵殑鐤戦棶銆傚鏋滄垜鐨勫洖绛斿彲浠ュ府鍒版偍锛岃鍙婃椂閲囩撼鍝︼紒
绛旓細鍝嶅簲寮忕郴缁熶笉鍚屻佺粍浠跺寲寮鍙涓嶅悓銆1銆乂ue3.0浣跨敤ES6鐨凱roxy瀵硅薄閲嶆瀯鍝嶅簲寮忕郴缁燂紝鏇夸唬浜Vue2.0鐨凮bject.defineProperty锛屽叿鏈夋洿濂界殑鎬ц兘鍜屾洿澶氱殑鍔熻兘锛屽鎹曟崏鏁扮粍鍙樺寲銆佸睘鎬ч噸鍛藉悕绛夈2銆乂ue3.0閫氳繃缁勫悎API瑙ｅ喅Vue2.0鐨勬暟鎹鐢ㄣ侀昏緫澶嶆潅绛夐棶棰橈紝鎻愪緵浜嗘洿鍔犵伒娲荤殑浠ｇ爜缁勭粐鏂瑰紡鍜岀粍浠跺鐢ㄦ柟寮忋
绛旓細浠ｇ爜缂栬緫鍣細Sublime Text銆丄tom绛 闄や簡Visual Studio Code锛岃繕鏈夎澶氬叾浠栫殑鏂囨湰缂栬緫鍣ㄥ拰闆嗘垚寮鍙戠幆澧冩敮鎸Vue寮鍙锛屽Sublime Text鍜孉tom绛夈傝繖浜涚紪杈戝櫒涔熸彁渚涗簡璇硶楂樹寒銆佷唬鐮佹彁绀虹瓑鍩烘湰鍔熻兘锛屽苟涓旀湁鐩稿簲鐨勬彃浠舵敮鎸乂ue寮鍙戙傜増鏈帶鍒剁郴缁燂細Git 鍦╒ue椤圭洰寮鍙戠殑娴佺▼涓紝Git鏄笉鍙垨缂虹殑鐗堟湰鎺у埗绯荤粺銆傚畠鍙互...
绛旓細鎴戜篃鍘荤瓟棰樿闂釜浜椤 鍏虫敞 灞曞紑鍏ㄩ儴 Element:涓濂楅氱敤缁勪欢搴撶殑寮鍙涔嬭矾Element 鏄敱楗夸簡涔圲ED璁捐銆侀タ浜嗕箞澶у墠绔紑鍙戠殑涓濂楀熀浜 Vue 2.0 鐨勬闈㈢缁勪欢搴撱備粖澶╂垜浠鍒嗕韩鐨勫氨鏄紑鍙 Element 鐨勪竴浜涘績寰椼傚畼缃:http://element.eleme.io/#/github:https://github.com/ElemeFE/element## 璁捐鐩殑澶ч儴鍒嗛」鐩捣...
