Vue, App与我(一)

Vue, App与我(一)

前言:

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

Vue-api:

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

搭建vue项目:

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

npm打包工具:

  • npm install webpack -g: webpack是一个前端的打包工具,类似于gulpgrunt,但是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

Vue-cli脚手架安装完成:

  • 以上的内容进行安装成功之后,Big-man和大家也就可以在自己的某个目录下创建一个文件(Directory)。然后在DOS(windows)下进入到这个文件目录下,进行下一步操作:
  • vue init webpack-simple 工程名字<工程名字不能用中文>或者创建 vue1.0 的项目vue init webpack-simple#1.0 工程名字<工程名字不能用中文>
  • 上一步骤完成后在你的目录想就有一个类似于这样的文档文件:
    vue的初始目录
  • 各个参数:
    • 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开发的独立效果图

总结:

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

JackDan9 Thinking

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值