Vue, App与我（一）

前言:

• 从事App的开发，这对于Big-man他自己一个新的挑战，App是基于Vue + PHP + Linux + MySql进行开发的。就他个人而言，这也是一次全新的挑战。

---

Vue-api:

• Vue的功能介绍这里就不进行了，可以查看Vue-api, 这里论述的是它的实际项目开发。

---

搭建vue项目:

• 搭建vue项目：
  
  • 在所有的搭建项目过程中，感觉vue的搭建项目最为简单和高效。具体的步骤需要进行说明一下：
  • 安装nodeJs: 如今的前端开发如果还是在写jsp、php之类的已经算不是前端的开发了，所以需要提前进行nodeJs的安装。
  • nodejs这个链接进行下载，并按照上面的提示步骤进行安装。
  • 在安装完nodejs之后，如果是默认的点击下一步的话，环境变量是存在nodejs的文件目录的，如果是自定安装需要在电脑的环境变量下也就是path下配置nodejs的文件路径。
  • windows下DOS窗口下输入: node -v，会出现响应的版本号，说明安装完成。
  • npm -version: 查看npm的版本号，需要在DOS（windows情况下）窗口下进行查看， 确定存在npm。至于什么是npm ? npm这不过这是英文的介绍，如果你英文不好的话，请自备《英汉双语字典》。

---

npm打包工具:

• npm install webpack -g: webpack是一个前端的打包工具，类似于gulp和grunt，但是vue的简易开发中，建议安装webpack。至于前端的打包工具分析，这里不再详细进行论述，需要进行了解的，可以去查看Big-man的另一篇blog，Big-man之前端工具比较。

---

Webpack打包工具介绍:

前言:

• webpack是一个现代JavaScript应用程序的模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的bundle-通常只有一个，由浏览器加载。

---

高度可配置文件:

• Webpack是高度可配置的文件，不然Big-man如何去控制其属性，所以在这里Big-man需要去解释一下。
• webpack是需要传入一个配置对象(configuration object)。取决于Big-man如何使用webpack，可以通过两种方式之一: 终端或者Node.js。

注意: Big-man的整个配置文件使用的是Node内置的path模块，并在它前面加上__dirname这个全局变量。可以防止不同操作系统的文件路径问题，并且可以使用相对路径按照预期工作。如果想要深入了解的伙伴可以查看英文原文的解释[POSIX和Windows]。

选项:

• Big-man下面配置代码中每个选项的名称，跳转到详细的文档。还要注意，/**/注释中的项目是用来显示更多示例，在某些情况下可以看到高级配置。

const path = require('path');

module.exports = {
    entry: "./app/entry"， // string | object | array
    /* entry: ["./app/entry1", "./app/entry2"], */
    /* entry: {
        a: "./app/entry-a",
        b: ["./app/entry-b1", "./app/entry-b2"]
    }, */
    /*
        这里是应用程序开始执行
        webpack开始打包
    */
    output: {
        // webpack 如何输出结果的相关选项

        path: path.resolve(__dirname, "dist"), // string
        // 所有输出文件的目标路径
        // 必须使用绝对路径(使用Node.js的path模块)

        filename: "bundle.js", // string
        /* filename: "[name].js", */ // 用于多个入口点(entry point)(出口点)。
        /* filename: "[chunkhash].js", */ // 用于长效缓存
        // [入口分块(entry chunk)]的文件名模板(出口分块)

        publicPath: "/assets/", // string
        /* publicPath: "", */
        /* publicPath: "http://cdn.example.com/", */
        // 输出解析文件的目录, url相对于HTML页面

        library: "MyLibrary", // string,
        // 导出库(exported library)的类型

        libraryTarget: "umd", // 通用模块定义
        /*
            libraryTarget: "umd2", // 通用模块定义
            libraryTarget: "commonjs2", // expoorted width module.exports
            libraryTarget: "commonjs-module", // 使用 module.exports 导出
            libraryTarget: "commonjs", // 作为 exports 的属性导出
            libraryTarget: "amd", // 使用 AMD 定义方法来定义
            libraryTarget: "this", // 在 this 上设置属性
            libraryTarget: "var", // 变量定义于根作用域下
            libraryTarget: "assign", // 盲分配(blind assignment)
            libraryTarget: "window", // 在 window 对象上设置属性
            libraryTarget: "global", // property set to global object
            libraryTarget: "jsonp", // jsonp wrapper
        */
        // 导出库(exported library)的类型

        /* 高级输出配置
             pathinfo: true, // boolean
             // 在生成代码时， 引入相关的模块、导出、请求等有帮助的路径信息。

            chunkFilename: "[id].js",
            chunkFilename: "[chunkhash].js", // 长效缓存(/guides/caching)
            // [附加分块(additional chunk)] 的文件名模块

            jsonFunction: "myWebpackJsonp", // string
            // 用于加载分块的 JSONP 函数名

            sourceMapFilename: "[file].map", // string
            sourceMapFilename: "sourcemaps/[file].map", // string
            // [source map 位置]的文件名模板

            devtoolModuleFilenameTemplate: "webpack:///[resource-path]?[hash]", // string   
            // [devtool 中模块] 的文件名模板(用于冲突)

            devtoolFallbackModuleFilenameTemplate: "webpack:///[resource-path]??[hash]", // string
            // [devtool 中模板]的文件名模板(用于冲突)

            umdNamedDefine: true, // boolean
            // 在 UMD 库中使用命名的 AMD 模块

            crossOriginLoading: "use-credentials", // 枚举
            crossOriginLoading: "anonymous", 
            crossOriginLoading: false,
            // 指定运行时如何发出跨域请求问题

            /* 专家级输出配置(自行承担风险)
                devtoolLine: {
                    test: /\.jsx$/
                },
                // 为这些模块使用 1:1 映射 SourceMaps(快速)

                hotUpdateMainFilename: "[hash].hot-update.json", // string
                // [HMR 清单]的文件名模板

                hotUpdateChunkFilename: "[id].[hash].hot-update.js", // string
                // [HMR 分块] 的文件名模板

                sourcePrefix: "\t", // string
                // 包内前置模块资源具有更好可读性
            */
         */
    },

    module {
        // 关于模块配置

        rules: [
            // 模板规则(配置 loader、解析器等选项)

            {
                test: /\.jsx?$/,
                include: [
                    path.resolve(__dirname, "app")
                ],
                exclude: [
                    path.resolve(__dirname, "app/demo-files")
                ],
                // 这里是匹配条件，每个选项都接收一个正则表达式或者字符串
                // test和include 具有相同的作用，都是必须匹配选项
                // exclude是必不匹配选项(优先于 test 和 include)
                // 最佳实践:
                // - 只在 test 和 include 中使用绝对路径数组
                // - 在 include 和 exclude 中使用绝对路径数组
                // - 尽量避免 exclude , 更倾向于使用 include

                issuer: { test, include, exclude },
                // issuer 条件(导入源)

                enforce: "pre",
                enforce: "post",
                // 标识应用这些规则, 即使规则覆盖(高级选项)

                loader: "babel-loader",
                // 应该应用的 loader, 它相对上下文解析
                // 为了更清晰, '-loader' 后缀在 webpack 2 中不再可选的
                // 可以去查看[webpack 1 升级指南](https://doc.webpack-china.org/guides/migrating)

                options: {
                    presets: ["es2015"]
                },
                // loader 的可选项
            }，

            {
                test: /\.html$/,
                test: "\.html$"

                use: [
                    // 应用多个 loader 和选项
                    "htmllint-loader",
                    {
                        loader: "html-loader",
                        options: {
                            /* ... */
                        }
                    }
                ]
            },

            { oneOf: [ /* rules */ ] },
            // 只使用这些嵌套规则之一

            { rules: [ /* rules */ ] },
            // 使用所有这些嵌套规则(合并可用条件)

            { resource: { and: [/* 条件 */]} },
            // 权当所有条件都匹配时才匹配

            { resource: { or: [/* 条件 */]} },
            { resource: [ /* 条件 */ ] },
            // 任意条件匹配时匹配(默认为数组)

            { resource: {not: /* 条件 */} }
            // 条件不匹配时匹配
        ],

        /* 高级模块匹配(点击展示) */

        noParse: [
            /special-library\.js$/
        ],
        // 不解析这里的模块

        unknownContextRequest: ".",
        unknownContextRecursive: true,
        unknownContextRegExp: /^\.\/.*$/,
        unknownContextCritical: true,
        exprContextRequest: ".",
        exprContextRegExp: /^\.\/.*$/,
        exprContextCritical: true,
        wrappedContextRegExp: /.*/,
        wrappedContextReCursive: true,
        wrappedContextCritical: false,
        // specifies default behavior for dynamic requests      
    },

    resolve: {
        // 解析模块请求的选项
        // (不适用于对 loader 解析)

        modules: [
            "node_modules",
            path.resolve(__dirname, "app")
        ],
        // 用于查找模块的目录

        extensions: [".js", ".json", ".jsx", ".css"],
        // 使用的扩展名

        alias: {
            // 模块别名列表

            "module": "new-module",
            // 起别名: "module" -> "new-module" 和 "module/path/file" -> "new-module/path/file"

            "only-module$": "new-module",
            // 起别名 "only-module" -> "new-module", 但不匹配 "only-module/path/file" -> "new-module/path/file"

            "module": path.resolve(__dirname, "app/third/module.js"),
            // 起别名 "module" -> "./app/third/module.js" 和 "module/file" 会导致错误
            // 模块别名相对于当前上下文导入
        }，

        /* 可供选择的别名语法(点击展示) */
        alias: [
            {
                name: "module",
                // 旧的请求

                alias: "new-module",
                // 新的请求

                onlyModule: true
                // 如果为 true, 只有"module" 是别名
                // 如果为 false, "module/inner/path" 也是别名
            }
        ],

        /* 高级解析选项(点击展示) */

        symlinks: true,
        // 遵循符号链接(symlinks)到新位置

        descriptionFiles: ["package.json"],
        // 从 package 描述中读取的文件

        mainFields: ['main'],
        // 从描述文件中读取属性
        // 当请求文件夹时

        aliasFields: [],
        // 从描述文件中读取属性
        // 以对此 package 的请求起别名

        enforceExtension: false,
        // 如果为true, 请求必不包括扩展名，
        // 如果为false, 请求可以包括扩展名

        moduleExtensions: ["-module"],
        enforceModuleExtensions: false,
        // 类似 extension/enforceExtension, 但是用模块名替换文件

        unsafeCache: true,
        unsafeCache: {},
        // 为解析的请求启用缓存
        // 这是不安全, 因为文件夹结构可能会改动
        // 但是性能改善是很大的

        cachePredicate: (path. request) => true
        // predicate function which selects requests for caching

        plugins: [
            // ...
        ]
        // 应用于解析器的附加插件
    },

    performance: {
        hints: "warning", // 枚举
        /*
            hints: "error", // 性能提示中抛出错误
            hints: false, // 关闭性能提示
        */
        maxAssetSize: 200000, // 整数类型(以字节为单位)
        maxEntrypointSize: 400000, // 整数类型(以字节为单位)
        assetFilter: function(assetFilename) {
            // 提供资源文件名的断言函数
            return assetFilename.endsWith('.css') || assetFilename.endsWidth('.js');
        }
    },

    devtool: "source-map", // enum
    /*
        devtool: "inline-source-map", // 嵌入到源文件中
        devtool: "eval-source-map", // 将SourceMap 嵌入到每个模块中
        devtool: "hidden-source-map", // SourceMap 不在源文件中引用
        devtool: "cheap-source-map", // 没有模块映射(module mappings)的 SourceMap 低级变体(cheap-variant)
        devtool: "cheap-module-source-map", // 有模块映射(module mappings)的 SourceMap 低级变体
        devtool: "eval", // 没有模块映射, 而是命名模块。以牺牲细节达到最快
    */
    // 通过在浏览器调试工具(browser devtool)中添加信息(meta info)增强调试
    // 牺牲了构建速度的source-map是最详细的。

    context: __dirname, // string(绝对路径)
    // webpack 的主目录
    // entry 和 module.rules.loader 选项
    // 相对于此目录解析

    target: "web", // 枚举
    /*
        target: "webworker", // WebWorker
        target: "node", // node.js 通过 require
        target: "async-node", // Node.js 通过 fs and vm
        target: "node-webkit", // nw.js
        target: "electron-main", // electron, 主进程(main process)
        target: "electron-renderer", // electron, 渲染进程(renderer process)
        target: (compiler) => { /* ... */ }, // 自定义
        // 包(bundle)应该运行的环境
        // 更改 块加载行为(chunk loading behavior) 和 可用模块(available module)
    */

    externals: ["react", /^@angular\//],
    /*
        externals: "react", // string(精确匹配)
        externals: /^[a-z\-]+($|\/)/, // 正则
        externals: {
            angular: "this angular", // this["angular"]
            react: { // UMD
                commonjs: "react",
                commonjs2: "react",
                amd: "react",
                root: "React"
            }
        },
        externals: (request) => { /* ... */ return "commonjs " + request }
    */
    // 不要遵循/打包这些模块，而是在运行时从环境中请求他们

    stats: "errors-only",
    /*
        stats: { // object
            assets: true,
            colors: true,
            errors: true,
            errorDetails: true,
            hash: true,
            // ...
        },
    */
    // 精确控制要显示的 bundle 显示

    devServer: {
        proxy: { // proxy URLs to backed development server
            'api': 'http://localhost:3000'
        },
        contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location
        compress: true, // enable gzip compression
        historyApiFallback: true, // true for index.html upon 404, object for multiple paths
        hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
        https: false, // true for self-signed, object for cert authority
        noInfo: true, // only errors & warns on hot reload
        // ...
    },

    plugins: [
        // ...
    ],
    // 附加插件列表

    /* 高级配置(点击展示) */

    resolveLoader: { /* 等同于 resolve */ }
    // 独立解析选项的loader

    parallelism: 1, // number
    // 限制并行处理模块的数量

    profile: true, // boolean
    // 捕获时机信息

    bail: true, // boolean
    // 在第一个错误出错时抛出, 而不是无视错误

    cache: false, // boolean
    // 禁用/启用缓存

    watch: true, // boolean
    // 启用观察

    watchOptions: {
        aggregateTimeout: 1000, // in ms
        // 将多个更改聚合到单个重构建(rebuild)

        poll: true,
        poll: 500, // 间隔单位 ms
        // 启用轮询观察模式
        // 必须用在不通知更改的文件系统中
        // 即 nfs shares (Network FileSystem, 最大的功能就是可以透过网络，讓不同的機器、不同的作業系統、可以彼此分享個別的檔案 ( share file ))
    },

    node: {
        // Polyfills and mocks to run Node.js-
        // environment code in non-Node environments

        console: false, // boolean | "mock"
        global: true, // boolean | "mock"
        process: true, // boolean
        __filename: "mock", // boolean | "mock"
        __dirname: "mock", // boolean | "mock"
        Buffer: true, // boolean | "mock"
        setImmediate: true // boolean | "mock" | "empty"
    },

    recordsPath: path.resolve(__dirname, "build/records.json"),
    recordsInputPath: path.resolve(__dirname, "build/records.json"),
    recordsOutputPath: path.resolve(__dirname, "build/records.json"),
    // TODO
}

---

vue-cli脚手架:

vue-cli脚手架安装:

• npm install vue-cli -g: 安装vue脚手架。

vue-cli使用介绍:

• Vue-cli是快速构建这个单页应用的脚手架, 安装完成之后会出现如下的显示:
  

---

Vue-cli脚手架安装完成:

• 以上的内容进行安装成功之后，Big-man和大家也就可以在自己的某个目录下创建一个文件(Directory)。然后在DOS（windows）下进入到这个文件目录下，进行下一步操作：
• vue init webpack-simple 工程名字<工程名字不能用中文>或者创建 vue1.0 的项目vue init webpack-simple#1.0 工程名字<工程名字不能用中文>。
• 上一步骤完成后在你的目录想就有一个类似于这样的文档文件：
  。
• 各个参数:
  
  • vue init webpack vuetest:
  • Test是项目名称，这个名字自己随便取。
  • 命令输入后，会进入安装阶段，需要用户输入一些信息:
  • Project name (vuetest)
  • 项目名称，可以自己指定，也可直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters），阮一峰老师博客为什么文件名要小写 ，可以参考一下。
• Project description (A Vue.js project) 项目描述，也可直接点击回车，使用默认名字。
• Author (........) 作者，不用说了，请把你霸气的名字输入进去吧。
• 接下来会让用户选择：
  
  • Runtime + Compiler: recommended for most users 运行加编译，既然已经说了推荐，就选它了

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere

• 仅运行时，已经有推荐了就选择第一个了。

---

• vue-router:
  
  • Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由， vue-router官网 。这里就输入“y”后回车即可。
  • Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，并不会影响整体的运行，这也是为了多人协作，新手就不用了，一般项目中都会使用。ESLint官网
  • 接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，因为我选择了使用ESLint。
  • Standard (https://github.com/feross/standard) 标准，有些看不明白，什么标准呢，去给提示的standardgithub地址看一下， 原来时js的标准风格。
  • AirBNB JavaScript最合理的方法，这个github地址说的是JavaScript最合理的方法
    
    • none (configure it yourself)这个不用说，自己定义风格

---

进一步完成配置:

• 再次完成配置，将需要的文件配置下来在(package.json)或者自己在DOS（进行安装），比如npm install vue-route vue-resource --save。

---

运行:

• npm install之后进行npm run dev这个在package.json配置好的，生成的时候就默认好了。
• 运行完之后在浏览器下输入http://localhost: 8080/, 输出的是:
  。

---

总结:

• 以上就是vue.js 基于 php进行的开发初始阶段，搭建环境。

---

JackDan9 Thinking