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
扫一扫
843
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
