Vue入门

• 准备工作
• 创建一个最简单的网站
• 目录结构
  • config/index.js
  • src/componets
  • src/views
  • src/App.vue
  • src/router/index.js
  • 小结
• 打包发布
• 总结
• 参考

Vue能让你模块化地开发网页。同时还能和其他插件协作，很方便进行打包发布

在阅读下文之前，确保对html/css/js有一些基本的了解。

准备工作

首先尽量安装最新版的Nodejs，然后在命令行里面测试下是否安装成功。

$ node -v
v10.14.1

$ npm -v
6.4.1

一般安装完Nodejs之后会自动把npm也安装好，但是有一些系统可能还需要手动安装npm，所以得在命令行里面检查下。

之后再全局安装vue和vue-cli，之后当前的开发环境就不需要再执行下面的命令了。

$ npm install vue
$ npm install --global vue-cli

创建一个最简单的网站

// 创建一个基于 webpack 模板的新项目到my-site文件夹下
$ vue init webpack my-site

// 这里会出现很多选项，让你配置测试，代码格式化插件等，默认按回车或者y+回车就好
? Project name my-site
? Project description A Vue.js project
? Author xuyi556677@163.com <xuyi556677@163.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "my-site".

网站创建好以后以后运行npm install安装项目所需要的依赖，之后可以运行npm run dev，在浏览器中http://localhost:8080可以看到运行的结果

目录结构

├── build # 存放打包发布时候的需要运行的脚本
|   ├── build.js
|   └── ...
├── config 项目配置信息
|   ├── index.js
|   └── ...
├── src
|   ├── asserts # 图片等静态资源
|   ├── componets # 默认没有，需要自检创建
|   ├── router
|   |   └── index.js
|   ├── views
|   |   └── HellowWorld.vue
|   ├── App.vue
|   └── main.js
├── static
├── test
├── index.html # 整个网页的入口文件，可以添加一些全局都需要引用的内容
└── package.json # 管理项目依赖

虽然看到有很多文件，但是Vue能将我们要开发的网页全部整合到了一个html文件中，根据路由规则显示不同的页面内容。从下面对一些文件的进行说明中，可以体会这句话的含义。

config/index.js

这个文件主要记录在开发模式和打包模式中的配置信息。

module.exports = {
  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    // 这个需要特别注意，在打包发布之后css，js文件的路径是相对的还是绝对的，不然可能找不到对应的文件
    assetsPublicPath: './',
  }
}

src/componets

这个文件夹下存放一些常用的组件，需要自己创建。下面以底栏为例，说明vue组件文件的结构

├── src
|   ├── componets
        └── Footer.vue

Footer.vue文件的具体内容如下：

<!-- template标签下存放html内容，没有任何特别之处 -->
<template>
  <div class="footer">
    <div class="container">
      <p>Copyright © 2018 MYXOF. All Right Reserved.</p>
    </div>
  </div>
</template>

<script>
// script标签下编写
// 1. JS脚本
// 2. export default里面填写要的导出内容，包括自己的名字，自己页面有用到的数据内容等
  export default {
    name: "Footer"
  }
</script>

<style scoped>
.footer{
    /* put your css here */
}
</style>

src/views

这里存放Vue项目里面的“视图”，一个视图是指一个能展现给用户的，不能再分割的页面内容。比如：一个最简单的视图包括了导航航+正文+底栏，那么这个页面就是Vue里面的一个视图。

视图里面主要包含了若干组件和自定义的内容，在上面的例子中，导航栏和底栏可以作为组件引入，正文则是自己自定义的内容。

默认在src/views会有一个HellowWorld视图(默认在componets下，这里为了描述方便把它移动到了views下，注意对应引用的路径需要修改)，下面就看一下怎么在一个视图中引入其他地方的组件。

<template>
  <div class="hello">
    <h1></h1>
    <h2>Essential Links</h2>
    <!--省略-->
  </div>
  
  <!--增加自定义Footer标签-->
  <my-footer/>
</template>

<script>
// 引入Footer文件，注意和文件名对应
import Footer from "../components/Footer"
export default {
  name: 'HelloWorld',
  components: {
        // 将自定义标签和Footer组件相对应
        'my-footer': Footer
      },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style scoped>
/* 省略 */
</style>

上面有三段注释的地方，在这三个地方添加对应的内容即可，底栏就算是加入到了当前视图当中去。其他组件的引用方法以此类推。

src/App.vue

虽然前面说到index.html是网页的入口文件，但其本质是一层外壳，对于开发者来说，App.vue才是真正的入口。最后当我们开发完进行打包之时，vue会把所有我们开发的内容放到App.vue中，然后再把App。vue的内容放到index.html中。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* 省略 */
</style>

其中最重要的部分就是<router-view/>，在HelloWorld.vue中的内容会被替换到这里。如果有多个视图，页面可以按照不同的情况显示一种的一个，就要靠src/router/index.js来控制。

src/router/index.js

看一下文件内容就能明白。当在浏览器输入http://127.0.0.1:8080的时候，对应的路径就是'/'，那么<router-view/>标签就会自动替换成HelloWorld视图里面的内容。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

routes里面是一个数组，当页面有多个视图要显示的时候，就往routes里面添加不同的路径即可。

要注意的是，在做页面的跳转的时候，不能像以前那样<a href='/xxx'>这种方式，要用vue自定义的写法,<router-link to="/xxx" class="nav-link">xxx</router-link>。在生成页面的时候，vue会帮我们转为<a>标签。

小结

以上就是vue项目的结构说明，以及每个文件能发挥的作用。

在开发的时候，一般先确定好有多少个组件，然后根据需要在每个视图中引用组件，最后确定好视图的路由规则即可。

打包发布

运行npm run build命令，在dist文件夹下会生成对应的html以及静态资源文件。

要注意，打包的过程中不会做正确性检查。检查页面是否有明显的bug，最好先运行 npm run unit，确认无误之后再打包发布

总结

从上面的分析可以看到，Vue将我们要开发的网页全部整合到了一个html文件中，根据路由规则显示不同的页面内容。这样能够将开发者的工作尽可能的独立开了，提高了开发者的效率。

当然，vue的强大之处还远不止如此，更多用法还需要参考下方的官网文档。

参考

• http://www.runoob.com/vue2/vue-install.html
• https://cn.vuejs.org/index.html
• https://router.vuejs.org/zh/