[Vue] 跟着 Vue 闯荡前端世界

透过 Vue-cli 建构项目

略过相关套件(webpack, ESLint, babel)繁杂的设定过程


前言


在进行前端开发时,往往会搭配一些建置套件 (ex. Gulp, Webpack) 来取代重复性的人工作业,而 Vue-cli 是由 Vue 官方提供的项目样板工具,可以快速透过命令建立出一个立即可用的开发环境,以下说明。

安装 Vue-cli 套件


官方建议在 Node.js (>=4.x, 6.x preferred) 及 npm version 3+  环境使用,可透过 npm 全域安装 vue-cli 套件;安装完毕后可使用 $ vue -V 查看版本,目前最新版本为 v2.8.1,相依的 vue 版本为 v2.1.1。

$ npm install -g vue-cli

建立 Vue 项目


透过 vue-cli 以下列语法建立 vue 项目结构

$ vue init <样板名称> <项目名称>

可使用 $ vue list 查看官方默认样板清单

直接使用 webpack 模板来建立 vue-demo 项目

$ vue init webpack vue-demo

建立过程可依需求调整相关选项:

  • 建议安装 vue-router (需要安装作为 SPA 路由)
  • 建议安装 ESLint (检查 coding style 套件,保持项目风格一致)
  • Karma, Mocha, Nightwatch (测试相关可依需求使用)

依照指示切换到项目目录后,安装所有项目相依套件,最后执行开发服务器挂载项目程序

$ cd vue-demo
$ npm install
$ npm run dev

看到欢迎消息表示上述作业都完成,接着就可以进行开发了

项目文件结构简介


webpack


webpack 是当前最热门的前端资源模块化管理及打包工具,任何型态资源(CommonJs Module, AMD Module, ES6 Module, CSS ...) 都可以视为模块,透过 webpack 依赖模块之相依姓和规则打包成前端资源;目前已演进到 v2.2 版本,设定上与 v1.X 有些微差异,各项设定说明如下。目前最新版本为 v2.2。

入口起点 (Entry Point) 

module.exports = {
    // ...
    entry: {
        app: './src/main.js'
    }
    // ...
}

可以透过入口文件 import 所需相依模块,可允许多组使用。

输出 (Output)

module.exports = {
    // ...
    output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production' ?
            config.build.assetsPublicPath :
            config.dev.assetsPublicPath
    }
    // ...
}

打包后输出文件位置:

  1. path 表示打包完成的文件放置位置 (默认为 dist 数据夹)
  2. fileanme 中的 [name] 会依据 entry 属性名称变动;可以使用 [chunkhash] 根据内容 hash 作为文件名,随着内容变动而变动,避免过板时旧档被缓存而产生问题
  3. publicPath 表示设定所有 assets 的 base path,多用于取得 CDN 相关资源情境

解析模块 (Resolve)

function resolve (dir) {
  // __dirname 表示被执行js所在数据夹位置
  // .. 表示上一层  
  return path.join(__dirname, '..', dir)
}

module.exports = {
    // ...
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        modules: [
            resolve('src'),
            resolve('node_modules')
        ],
        alias: {
            'vue$': 'vue/dist/vue.common.js',
            'src': resolve('src'),
            'assets': resolve('src/assets'),
            'components': resolve('src/components')
        }
    }
    // ...
}

文档路径指向相关设定,让 import module 更加精简:

  1. extensions : 自动解析副文件名,设定后可用 require('boo') 表示 require('boo.vue')  
  2. modules : 模块搜索路径,设定后可用 require('boo.js') 取代相对路径 require('../src/boo.js')
  3. alias : 建立别名,设定后可用 require('components/boo.js') 取代相对路径 require('../../components/boo.js') 

加载器 (Loader)

function resolve(dir) {
    // __dirname 表示被执行js所在数据夹位置
    // .. 表示上一层  
    return path.join(__dirname, '..', dir)
}

module.exports = {
    // ...
    module: {
        rules: [
            // ...
            {
                test: /.(js|vue)$/,
                loader: 'eslint-loader',
                enforce: "pre",  // 预前处理
                include: [resolve('src'), resolve('test')],
                options: {
                    formatter: require('eslint-friendly-formatter')
                }
            },
            {
                test: /.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            }
            // ...
        ]
    }
    // ...
}

在 rules 中设置多组 Loader 来处理对应文件的转换作业:

  1. test : 设置文件描述 (ex. 副文件名为 js / vue 的文件)
  2. loader : 使用哪个 loader 套件进行处理
  3. enforce : 可选择 pre 来进行前处理 (ex. 透过 eslint 先检查代码有无错误)
  4. include : 限制特定数据夹中的文件 (缩小范围、提升转换效率)
  5. optoins : 其他设置项目

   

babel


由于现行 ES6 及 ES7 语法于浏览器的支持度不高,但新版本 JavaScript 语法可以为开发人员带来便捷的开发体验,因此可以透过 Babel 这个转码器来将新型态 JavaScript 语法转为接受度高的 ES5 语法,所以 vue-cli 默认就将 babel-loader 整合在 webpack 中来针对所有 js 档进行转换,让我们可以直接使用 ES6 或 ES7 语法进行开发。目前最新版本为 v6.22。

可以透过 .babelrc 文件配置相关设定,简介如下。

{
  // 转码规则
  "presets": [
    // ES2015转码规则 (babel-preset-es2015)
    ["es2015", { "modules": false }],
    // ES7不同阶段语法提案的转码规则 (babel-preset-stage-2)
    "stage-2"
  ],
  // 使用的插件
  "plugins": ["transform-runtime"],
  // 转码时不输出注解文字
  "comments": false,
  // 不同环境可以设定不同配置
  "env": {
    // BABEL_ENV 为 test 的时候使用 babel-plugin-istanbul 插件
    "test": {
      "plugins": [ "istanbul" ]
    }
  }
}

ESLint


使用 ESLint 目的在于确保程序的一致性和避免错误,每条规则都各自独立且可以设置启用或关闭,让弱类型的 JavaScript 语言可以在编码的过程中及时发现问题并修正;可以透过 .eslintrc 文件配置相关设定,简介如下。目前最新版本为 v3.14。

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  // 指定脚本的运行环境
  // 每种环境都有一组特定的预定义全局变量
  env: {
    browser: true,
    // 启用 jQuery 全局变量。
    jquery: true   
  },
  extends: 'standard',
  plugins: [
    'html'
  ],
  // 启用的规则及各自的错误级别
  // 0: 关闭规则, 1: 开启规则[warn], 2: 开启规则[error]-进程会退出
  'rules': {
    'arrow-parens': 0,
    'generator-star-spacing': 0,
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  },
  // 当访问未定义的变量时,no-undef 规则将发出警告
  // 因此需定义脚本在执行期间访问的额外的全局变量
  // true 允许变量被重写, false 不允许被重写
  globals: {
    "_": true,
    "toastr": true
  }
}

参考资讯


Webpack 2.2 中文文档

Babel - Use next generation JavaScript, today

ESLint - The pluggable linting utility for JavaScript and JSX


希望此篇文章可以帮助到需要的人

若内容有误或有其他建议请不吝留言给笔者喔 !