2017-08-02

Vue2.0最全入坑指南(配置篇)

前言

距离上一篇vue 文章快一个月了，最近在忙项目，有点时间又上来继续更新。本篇主要介绍 vue 项目的脚手架文件，具体是做什么用的？了解清楚结构，对后面的开发也有极大的帮助。

目录梳理

build — 目录是一些 webpack 的文件，配置参数什么的，一般不用动
config — 是 vue 项目的基本配置文件
node_modules — 是项目中安装的依赖模块
src — 源码文件夹，基本上文件都应该放在这里。

assets — 资源文件夹，里面放一些常见资源
components — 这里放的都是各个组件文件
router — vue 路由模块
App.vue — App.vue 组件
main.js — 入口文件

static — 静态文件夹，放一些图片\js\css 等
test — 测试文件夹，测试都写在这里
.babelrc — babel 编译参数，vue 开发涉及到一些 es6 的语法
.editorconfig — IDE 配置文件，常见的格式处理
.gitignore — 用来过滤一些版本控制的文件，比如 node_modules 文件夹
.postcssrc.js — 自动补全 css 浏览器前缀
index.html — 主页
package.json — 项目文件，记载着一些命令和依赖还有简要的项目描述信息
README.md — 项目说明书，用 markdown 写的。不会写就参照 github 上 star 多的项目，看人家怎么写的

PS:可能大家看到我的截图没有node_modules文件夹，这是我 IDE 把它屏蔽掉了。

文件说明

config/index.js

这里主要针对 dev 配置做下说明，因为这块是我们常用的，上面的 build 设置类似。如下：

dev: {
      env: require('./dev.env'),    //引用测试环境配置
      port: 8000,                  //端口号
      autoOpenBrowser: false,      //是否打开浏览器
      assetsSubDirectory: 'static',      //静态资源引用目录
      assetsPublicPath: '/',    //静态资源引用路径设置
      proxyTable: {},        //代理设置，很好的解决了跨域问题
      // CSS Sourcemaps off by default because relative paths are "buggy"
      // with this option, according to the CSS-Loader README
      // (https://github.com/webpack/css-loader#sourcemaps)
      // In our experience, they generally work as expected,
      // just be aware of this issue when enabling this option.
      cssSourceMap: false     //是否生成css sourceMap文件
  }

Hello.vue

在 components 文件夹下有一个 Hello.vue，这是我们的第二个 vue 组件。这不是只有一个么，是的。在我们的根目录下面还有一个 app.vue 这也是一个组件。不同的是 app.vue 相当与父组件，而 Hello.vue 相当于子组件。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1> <!-- 这里是展示数据的  -->
    <h2>Essential Links</h2>
    <ul>
      <li><a href="http://tigerliu.site/" target="_blank">Tiger Blog</a></li>
      <li><a href="https://github.com/tiger6" target="_blank">github</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'hello',   /* 这个name暂时不知道用啥用 */
  data () {
    return {
      /* 这里是数据，一定记住数据一定要放data中然后用return返回 */
      msg: 'Welcome to Your'
    }
  }
}
</script>

<!--添加“scoped”属性，仅将CSS限制为该组件 -->
<style lang='less' scoped>
/*scoped的意思是这里的样式只对当前页面有效不会影响其他页面，还有可以设置lang="scss"就是支持css预编译，也就是支持sass或者less*/
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

PS:在*.vue 文件，template 标签里写 html 代码，且 template 直接子级只能有一个标签。style 标签里写样式，script 里面写 js 代码

router/index.js

vue 路由配置页

import Vue from 'vue'; /* 引用vue文件 */
import Router from 'vue-router'; /* 引用vue路由模块，并赋值给变量Router */
import Hello from '@/components/Hello'; /* 英文Hello.vue模版，并赋值给变量Hello,这里是“@”相当于“../” */

Vue.use(Router); /* 使用路由 */

export default new Router({
  routes: [
    /* 进行路由配置，规定“/”引入到Hello组件 */
    {
      path: '/',
      name: 'Hello' /* 这个name用来匹配路由跳转，例如: :to="{name:'hello'}" */,
      component: Hello /* 注册Hello组件 */
    }
  ]
});

App.vue

这是一个标准的 vue 组件，包含三个部分，一个是模板(template)，一个是 script，一个是样式(style)

<template>
  <div id="app">
    <img src="/static/logo.jpg">
    <!--  引用静态资源文件 -->
    <router-view></router-view>
    <!--  这里是用来展示路由页面内容的，如果想用跳转就用<router-link to='xxx'></router-link> -->
  </div>
</template>

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

PS: <img src="/static/logo.jpg">引用 static 文件夹下的资源。这里有必要说下 assets 与 static 的区别，assets 放置的是组件的资源，static 放置的是非组件的资源。比如上面的图片引用，assets 文件夹的图片会被 webpack 打包到一起，而 static 文件夹是浏览器直接去请求图片文件。

main.js

这个 js 文件是主页面配置的主入口,可以引入一些插件或静态资源(引入前需先安装)。
主要是利用 es6 的模块化引入模块。

import Vue from 'vue'; /* 这里是引入vue文件 */
import App from './App'; /* 这里是引入同目录下的App.vue模块 */
import router from './router'; /* 这里是引入vue的路由 */

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app' /* 定义作用范围就是index.html里的id为app的范围内 */,
  router /* 引入路由 */,
  template: '<App/>' /* 给Vue实例初始一个App组件作为template 相当于默认组件 */,
  components: { App } /* 注册引入的组件App.vue */
});

index.html

主页的 html 跟我们平常的无异，引入文件，书写基本信息，添加 meta 标签等。
这里 id=’app’，是为后面的设置 vue 作用域有关。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 兼容移动端 -->
    <meta name="viewport" content="user-scalable=no, width=device-width,initial-scale=1,minimum-scale=1">
    <meta name="screen-orientation" content="portrait"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <!-- 全屏设置 -->
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <title>vue2</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

package.json

package.json 必须是一个严格的 json 文件，而不仅仅是 js 里边的一个对象。其中很多属性可以通过 npm-config 来生成。

{
  "name": "vue2",   //项目名称
  "version": "1.0.0",  //版本
  "description": "A Vue.js project",  //描述信息
  "author": "tiger6",      //作者
  "private": true,        //私有项目
  "scripts": {            //项目的生命周期个各个环节需要执行的命令
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e"
  },
  "dependencies": {   //生产阶段依赖的模块列表
    "vue": "^2.3.3",
    "vue-router": "^2.6.0"
  },
  "devDependencies": {   //开发环境依赖的模块列表
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^7.1.1"
    //..............省略其他模块..................
  },
  "engines": {     //node/npm版本支持
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [    //浏览器支持的版本
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

项目源代码参考：tiger-vue2

结语

总结下，如果需要增加组件那就在 components 文件下定义 xx.vue 文件并编写代码即可，如果需要配置路由就要进行在 index.js 进行路由“路径”配置，如果需要点击跳转就要用到标签了。如果需要增加 less/sass css 预编译支持，先安装然后在需要用到的地方 style 标签加上 lang=”less”或者 lang=”scss”就好了。其他组件库，UI 组件使用方法类似，先安装再导入使用。后面将会分析 vue 组件,vue 路由，vuex 等文章。有问题欢迎页脚留言，谢谢！！！

赏

纯属好玩