vue.js 模块化html,Vue.js一个简单的模块化应用

一个简单的模块化项目：

使用vue-cli、webpack构建的项目。项目的具体构建以及项目中各种配置，涉及到太多内容，这里不讨论。只讲一下简单的应用。

所做的工作都在src文件夹下。

在根目录下，有一个index.html，是访问项目时默认的页面，在页面加载后，可以看到其引入了app.js文件。应该是工程中通过某种方式生成的一个js文件。我们需要关心的只是

main.js文件。将main.js文件修改后如下：

main.js:

import Vue from 'vue'

import App from './App'

// 引入路由组件、自定义路由组件

import VueRouter from "vue-router"

import router from "./router"

//使用路由组件

/*如果是直接在html页面中使用，引入js文件后，会自动安装*/

/*在模块工程中使用vue-router，需要通过Vue.use()明确的安装路由功能。*/

Vue.use(VueRouter)

new Vue({

el: '#app',

template: '',

/*注意在 ES2015+ 中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，和Babel以及webpack有关系*/

components: { App },

router:router

})

其中引入了我们自定义的router.js文件以及App.vue组件。

App.vue组件和main.js位于同级目录下。App.vue项目创建时自带，这里对它进行了修改。当然，我们自己创建一个组件，然后引入也可。

App.vue:

{{item.name}}

export default {

name:'app',

data:function(){

return {

menulist:[

{name:'首页',url:'/home'},

{name:'用户',url:'/user/18'},

{name:'产品',url:'/product/20'}

]

}

}

}

#app {

}

.top-menu ul, .top-meun li{

list-style:none;

}

.top-menu{

overflow:hidden;

}

.top-menu li{

float:left;

width:100px;

}

观察渲染后的页面可以看出，vue将挂载点的内容替换为了App.vue中的模板内容。

router.js文件和main.js位于同级目录下。

router.js:

/*import语法是ES6标准规范，使用export指令导出接口，import指令导入模块。*/

/*直接写文件名，则从node_modules下面开始找。*/

import VueRouter from 'vue-router'

/*使用./、../等相对路径写法时，按相对路径来找export出来的内容*/

import Home from "./components/home.vue"

/*路径中使用@开头，这时webpack配置的路径别名。默认配置为src路径。*/

import User from "@/components/user.vue"

import Product from "@/components/product.vue"

/*如果最终找到的是一个文件夹，则首先看文件夹下是否有package.json。有的话会加载main字段指向的文件。没有的话，找文件夹下的index文件并加载*/

/*定义注册3个路由*/

/*导出创建的VueRouter对象，创建时传入配置参数*/

export default new VueRouter({

routes:[{path:"/home",component:Home},

/*动态路径参数，以冒号开头*/

/*当匹配到一个路由时，参数值会被设置的到this.$route.params中，可以使用this.$route.params.id来取出参数值*/

{path:"/user/:id",component:User},

{path:"/product/:id",component:Product}]

})

对于在页面上，想要导航的页面，把他们引入到了router.js中，并将他们注册为了路由。本例中，三个页面都是单独的组件，放在了src/components目录下。它们内容类似。

home.vue:

{{message}}

/*导出接口。default表示采用默认导出的方式*/

export default{

name:'home',

data(){

return {

message:'这里是home视图'

}

}

}

h3 {

background-color:#c5c5c5

}

user.vue:

{{message}}，获取到的参数是：{{$route.params.id}}

export default{

name:'user',

data(){

return{

message:'这里是user视图'

}

}

}

h3 {

background-color:gold

}

product.vue:

{{message}}，获取到的参数是{{$route.params.id}}

export default{

name:'product',

data(){

return{

message:'这里是product视图'

}

}

}

h3 {

background-color:violet

}

将以上文件放在可运行的工程下。访问http://localhost:8080 可以看到如下的效果：

对于端口号，可以修改 cofig/index.js中的配置进行更改。