列子

一个Vue 项目

使用 vue-cli 来创建vayne template

vue init vaynejs/webpack vayne-vue-demo

所需要配置

'use strict'
module.exports = {
  entry: {
    app: './src/main.js'
  },
  template: 'index.html',
  plugins: [
    'vayne-plugin-vue'
  ]
}

package.json 的内容

这里需说明的是为了更灵活的配置不同项目 所以babel 和eslint 的预设的使用的 外装。并未直接安装到 vayne 中 所以使用时需自己安装 以可以使用vayne 的插件 babel-preset-vayne 和 eslint-config-vayne

{
  "name": "vayne-vue-demo",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "阿平 <xierenyuan@qq.com>",
  "private": true,
  "scripts": {
    "dev": "vayne server",
    "lint": "eslint --ext .js,.vue src",
    "build": "vayne build"
  },
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.2.1",
    "babel-preset-vayne": "^1.0.2",
    "eslint-config-vayne": "^0.0.3",
    "vayne-plugin-vue": "^1.0.3",
    "vue-template-compiler": "^2.5.2"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

启动

# yarn 指向淘宝镜像
yarn config set registry https://registry.npm.taobao.org -g

# yarn node-sass 安装
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

yarn install

# 启动
vayne server

# 打开浏览器
vayne server -O

# build
vayne build

# View the bundle analyzer report after build finishes
vayne build -R

依赖管理

当然，如果你担心别人使用你的项目也需要全局安装 vayne 并且无法精确的控制依赖的话，你也可以在项目里安装 vayne 那么 package.json 大致就是：

{
  "name": "vayne-vue-demo",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "阿平 <xierenyuan@qq.com>",
  "private": true,
  "scripts": {
    "dev": "vayne server",
    "lint": "eslint --ext .js,.vue src",
    "build": "vayne build"
  },
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "vayne": "^0.0.23",
    "autoprefixer": "^7.2.1",
    "babel-preset-vayne": "^1.0.2",
    "eslint-config-vayne": "^0.0.3",
    "vayne-plugin-vue": "^1.0.3",
    "vue-template-compiler": "^2.5.2"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}