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

妖狐艹你老母 2022-05-10 12:00 159阅读 0赞

一个简单的模块化项目：

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

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

![70][]

在根目录下，有一个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: '<App/>',

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

components: \{ App \},

router:router

\})

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

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

App.vue:

<div>

<ul>

<router-link :to="item.url">\{ \{item.name\}\}</router-link>

</li>

</ul>

</nav>

<hr>

<div>

<router-view></router-view>

</div>

</template>

export default \{

name:'app',

data:function()\{

return \{

menulist:\[

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

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

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

</script>

<style>

\#app \{

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

list-style:none;

.top-menu\{

overflow:hidden;

.top-menu li\{

float:left;

width:100px;

</style>

观察渲染后的页面可以看出，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:

<h3>\{ \{message\}\}</h3>

</div>

</template>

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

export default\{

name:'home',

data()\{

return \{

message:'这里是home视图'

</script>

h3 \{

background-color:\#c5c5c5

</style>

user.vue:

<div>

<h3>\{ \{message\}\}，获取到的参数是：\{ \{$route.params.id\}\}</h3>

</div>

</template>

export default\{

name:'user',

data()\{

return\{

message:'这里是user视图'

</script>

h3 \{

background-color:gold

</style>

product.vue:

<h3>\{ \{message\}\}，获取到的参数是\{ \{$route.params.id\}\}</h3>

</div>

</template>

export default\{

name:'product',

data()\{

return\{

message:'这里是product视图'

</script>

<style>

h3 \{

background-color:violet

</style>

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

![70 1][]

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

[70]: /images/20220510/83938f0077cc4c1dab675c118c2350db.png
[70 1]: /images/20220510/32396ff239034564aa29f5acc3683ede.png

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关模块化挑战：Java应用如何实现模块化的设计

相关 js应用模块化

相关 Vuejs组件化开发

相关 vuex 模块化应用

相关 laravel和vuejs第一个最简单的示例hello Vuejs

相关 seajs 模块化简单开发使用

相关 Vue.js一个简单的模块化应用

相关 VueJS -- 使用vue+webpack搭建一个vue简单工程项目

相关【Vue 学习】- VueJS 简单入门

相关构建一个简单的WCF应用