Vue开发指南之重点知识梳理

Vue开发指南之重点知识梳理攻略

目录结构

一个Vue.js项目的目录结构一般如下：

├── build                       // webpack配置文件
│   ├── build.js
│   ├── check-versions.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config                      // 项目开发环境配置
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── node_modules                // npm依赖的包
├── src                         // 开发人员编写代码的目录
│   ├── assets                  // 静态资源如图片、字体文件等
│   ├── components              // 公共组件
│   ├── router                  // 前端路由
│   ├── store                   // Vuex状态管理器
│   ├── util                    // 公用方法
│   ├── views                   // 页面级组件
│   ├── App.vue                 // 根组件
│   └── main.js                 // 入口文件
├── static                      // 静态资源如缓存文件等
├── index.html                  // 页面入口文件
├── package.json                // 项目依赖及配置信息文件
└── README.md                   // 项目说明文档

Vue组件化开发

Vue.js核心思想是组件化，大型Web应用程序的组件化开发可以提高开发效率和代码可维护性，组件可重用性高。Vue.js的组件开发是对Web组件规范的一种实现，一个Vue.js组件需要包含如下几个元素：
- 模板：是组件中的可替换区域，包含JavaScript、HTML和CSS，Vue.js使用 render 函数实现动态渲染。
- JavaScript：是组件中实现组件的行为和逻辑的关键，是组件的核心部分。
- 样式：组件的各种样式集合体。

示例1：创建一个简单的Vue组件

<!-- 组件代码 template -->
<template>
  <div>
    <h2> {{title}} </h2>
    <ul>
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
    </ul>
    <button v-on:click="change">改变数据</button>
  </div>
</template>

<script>
// 组件代码 script
export default {
  data() {
    return {
      title: 'Vue.js组件开发',
      arr: ['JavaScript', 'HTML', 'CSS']
    }
  },
  methods: {
    change() {
      this.arr.push('Vue.js');
    }
  }
}
</script>

<style scoped>
/* 组件样式 */
h2 {
  color: #f00;
}
</style>

Vue单页面应用（SPA）

SPA是指只有一个页面的Web应用程序。在SPA中，所有的页面都是在同一个页面中通过js动态替换，加载其他数据。相对传统的多页面应用，节约带宽，节省请求时间，实现了前后端分离。SPA应用通过利用前端路由可以更好地控制用户页面块的状态和用户体验。

示例2：使用Vue-router实现SPA

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import Home from './views/Home.vue'
import About from './views/About.vue'

export default {
  components: { Home, About }
}
</script>

<style>
.active {
  color: #f00;
}
</style>

// router.js
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

export default router

以上是Vue开发指南之重点知识梳理的部分内容，详细讲解了Vue.js项目的目录结构、组件化开发和Vue单页面应用三个方面，投入实践就能更加熟练地掌握这些知识。