详解vue+vueRouter+webpack的简单实例

详解vue+vueRouter+webpack的简单实例

最近vue更新的2.0版本，唉，我是在2.0版本前学习的，现在更新了又要看一遍了，关键是我之前看了3个星期2.0就更新了，vux还没同步更新，导致我用vux时要将vue的版本降回1.x，vue-router也要降回1.0才能使用~~~所以今天就写一个单页的下方tabbar的实例来记录一下吧，也希望各位在用vue全家桶时少点坑吧，当然不是用vux= =…只是仿造而已

这里的demo我会使用vue2.0的simple-template作为脚手架，vue-router版本也是2.0的，如果想使用vux作为组件库的话，大家就降版本吧~哦对了，如果大家正式写项目的话，记得要用vuex，不是开玩笑，我之前写了个简单的单页应用就没用vuex也没用组件库都是手写，然后组件之间的通信各种烦，你能想象一直向上广播事件$boardCast之后，再一直向下分发 $emit的无语吗……到最后自己都乱了，所以不是自己写demo而是开始项目的话还是推荐使用vuex了，用过react的同学的话就知道了，vuex跟redux是一样的~只是一个用于vue，一个用于react而已.

好了，开始构建吧~

Prerequisites: Node.js (>=4.x, 6.x preferred) and Git.

前提当然是装了node且版本已经升级为6.x，在尤大大的vue-cli的使用教程中有说明的，对这里我们是采用自动化构建的方式创建配置模板

首先从零开始，打开打算创建的项目根目录，再打开git的命令行吧~

1、全局安装vue-cli脚手架

npm install -g vue-cli

2、初始化webpack+vue的脚手架模板，这里我是用的简化版模板，不带单元测试的~因为多出来的很多我看不懂……….简化版的我大概能看懂，也是我菜的原因= =…

vue init webpack-simple

vue init webpack-simple test

3、按照步骤来就好

cd test

npm install 这里会安装babel、vue的加载器等各类依赖,这里要等一会，有点慢

npm run dev 这里跑一下本地文件，看看是否搭建完成，如果出现vue的页面就完毕了

4、安装vue-router与需要的组件库，这里我装一个饿了么的组件库ElementUI吧,地址http://element.http://eleme.io/，因为已经兼容了vue2.0的版本，所以暂时拿来用用吧~官方文档齐全，需要什么自己去看吧，我这里就简单用一点

npm install vue-router

npm i element-ui -D

5、记得安装css的加载器，如果你是用less或者sass的话，自己对应装了添加到加载器就好

npm install style-loader css-loader 如果没错的话，你的加载器现在应该是这样的，最后在package.json里面依赖文件要加上element-ui

//package.json

"dependencies": {

"element-ui": "^1.0.4",

"vue": "^2.1.0"

}

//webpack.config.js

module: {

rules: [

{

test: /\.vue$/,

loader: 'vue-loader',

options: {

// vue-loader options go here

}

},

{

test: /\.js$/,

loader: 'babel-loader',

exclude: /node_modules/

},

{

test: /\.css$/,

loader: 'style-loader!css-loader'

},

{//添上这条规则，这是elementUI要用到的

test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,

loader: 'file-loader'

},

{

test: /\.(png|jpg|gif|svg)$/,

loader: 'file-loader',

options: {

name: '[name].[ext]?[hash]'

}

}

]

}

6、分模块，写组件

下面先展示我的文件目录

test

dist

build.js

node_modules

…

src

App.vue

discovery.vue

index.vue

info.vue

main.js

setting.vue

.babelrc

.gitignore

index.html

package.json

README.md

webpack.config.js

//App.vue（这里仿制vux的下方tabbar写了一个组件,所以有点多，代码有点烂，请原谅）

vue init webpack-simple test

3、按照步骤来就好

cd test

npm install 这里会安装babel、vue的加载器等各类依赖,这里要等一会，有点慢

npm run dev 这里跑一下本地文件，看看是否搭建完成，如果出现vue的页面就完毕了

4、安装vue-router与需要的组件库，这里我装一个饿了么的组件库ElementUI吧,地址http://element.http://eleme.io/，因为已经兼容了vue2.0的版本，所以暂时拿来用用吧~官方文档齐全，需要什么自己去看吧，我这里就简单用一点

npm install vue-router

npm i element-ui -D

5、记得安装css的加载器，如果你是用less或者sass的话，自己对应装了添加到加载器就好

npm install style-loader css-loader 如果没错的话，你的加载器现在应该是这样的，最后在package.json里面依赖文件要加上element-ui

//package.json

"dependencies": {

"element-ui": "^1.0.4",

"vue": "^2.1.0"

}

//webpack.config.js

module: {

rules: [

{

test: /\.vue$/,

loader: 'vue-loader',

options: {

// vue-loader options go here

}

},

{

test: /\.js$/,

loader: 'babel-loader',

exclude: /node_modules/

},

{

test: /\.css$/,

loader: 'style-loader!css-loader'

},

{//添上这条规则，这是elementUI要用到的

test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,

loader: 'file-loader'

},

{

test: /\.(png|jpg|gif|svg)$/,

loader: 'file-loader',

options: {

name: '[name].[ext]?[hash]'

}

}

]

}

6、分模块，写组件

下面先展示我的文件目录

test

dist

build.js

node_modules

…

src

App.vue

discovery.vue

index.vue

info.vue

main.js

setting.vue

.babelrc

.gitignore

index.html

package.json

README.md

webpack.config.js

//App.vue（这里仿制vux的下方tabbar写了一个组件,所以有点多，代码有点烂，请原谅）

主页

信息

发现

设置

//index.vue(主页模块，套了一点elementUI，有点东西好看点= =..)

处理中心

选项1

选项2

选项3

订单管理

//info.vue(主页模块，套了一点elementUI，有点东西好看点= =..)

title="成功提示的文案"

type="success">

title="成功提示的文案"

type="success">

title="消息提示的文案"

type="info">

title="消息提示的文案"

type="info">

title="警告提示的文案"

type="warning">

title="警告提示的文案"

type="warning">

title="错误提示的文案"

type="error">

title="错误提示的文案"

type="error">

//discovery.vue(发现模块)

下一步

//setting.vue(设置模块)

v-model="value2"

:colors="['#99A9BF', '#F7BA2A', '#FF9900']"

:allow-half="true">

v-model="value2"

:colors="['#99A9BF', '#F7BA2A', '#FF9900']"

:allow-half="true">

{{value2}}

//main.js(主文件，声明全局router)

import Vue from 'vue'

import Router from 'vue-router'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-default/index.css'

import App from './App.vue'

import index from './index.vue'

import info from './info.vue'

import discovery from './discovery.vue'

import setting from './setting.vue'

Vue.use(Router);

Vue.use(ElementUI);

const router = new Router({

routes:[

{

path:'/',

component:index

},

{

path:'/index',

component:index

},

{

path:'/info',

component:info

},

{

path:'/discovery',

component:discovery

},

{

path:'/setting',

component:setting

}

]

});

new Vue({

el: '#app',

render: h => h(App),

router:router

});

最后就是webpack的入口文件必然是要改成main.js的，出口文件的文件夹为dist,名字就你自己定了，在index.html里加上就好~具体可以在我的另一篇笔记”初识webpack “中有写过

最后npm run dev 查看效果就ok~如果想改绑定的端口号或者主机号，则在package.json中对应改就好

example:

"scripts": {

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

"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"

}

其中端口号是dev中的 --port ,主机号则为--host 就比如我这里则绑定的为8181端口。

最后给大家展示一下效果图吧~没看过vue-router的同学请自行看文档= =…我这里只是最基础的展示了而已

http://localhost:8181/#/index

http://localhost:8181/#/info

http://localhost:8181/#/discovery

http://localhost:8181/#/setting

其实都是一些很简单的代码和组件划分，大家应该看一看就明白的了，最后vux你快更新2.0吧555~不说了我去看vuex了

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。