Vue脚手架目录详解

build：webpack配置文件

config：webpack配置文件

node_modules：安装的依赖包

src：所有的组件都写在里面

static：所有第三方的静态资源存放目录

.babelrc：babel的一些配置（比如将es6编译成es5的一些配置）

.editorconfig：编辑器的一些配置（包括编码格式，缩进风格，换行格式）

.gitignore：配置Git仓库忽略的一些文件（不会上传）

.postcssrc.js 配置postcss的文件（主要是css样式兼容性，自动加前缀（autoprefixer））

index.html：入口html文件。

package.json: 项目的一些配置信息（项目的一些具体信息）

package-lock.json就是锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。

autoprefixer：是用于给css3属性自动加属性前缀的

babel系列都是处理语法的

chalk：适用于格式化输出命令行信息的，比如run dev以后的start...

copy-webpack-plugin：在webpack中拷贝文件和文件夹

extract-text-webpack-plugin：为了抽离css样式，防止将样式打包在js中引起页面样式加载错乱的现象

file-loader： *** 作文件

friendly-errors-webpack-plugin：能够更好在终端看到webapck运行的警告和错误

html-webpack-plugin ：插件的基本作用就是生成html文件

node-notifier：来发送桌面消息,包括应用状态改变以及错误信息

optimize-css-assets-webpack-plugin：压缩提取出的css，并解决ExtractTextPlugin分离出的js重复问题(多个文件引入同一css文件)

ora：命令行里自动运行的信息提示

portfinder：可以帮你找出正在运行的进程打开了哪些端口

rimraf：跑shell命令 rm-rf 的工具

semver：是用来对特定的版本号做判断的(check-version.js)中

shelljs：selljs是在node里跑shell命令的工具，比如‘rm -rf’在(check-version.js)中，属于Unix命令

uglifyjs-webpack-plugin：压缩js

webpack：打包工具

webpack-bundle-analyzer：打包优化工具，可得到一个可视化模块大小界面

webpack-dev-server：配合webpack，创建开发环境（启动服务器、监视文件变化、自动编译、刷新浏览器等），提高开发效率

webpack-merge：合并

在项目中添加第三方库的最简单方式是讲其作为一个全局变量, 挂载到 window 对象上:

entry.js

window._ = require('lodash')

MyComponent.vue

export default {

created() {

console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..')

}

}

这种方式不适合于服务端渲染, 因为服务端没有 window 对象, 是 undefined, 当试图去访问属性时会报错.

在每个文件中引入

另一个简单的方式是在每一个需要该库的文件中导入:

MyComponent.vue

import _ from 'lodash'

export default {

created() {

console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..')

}

}

这种方式是允许的, 但是比较繁琐, 并且带来的问题是: 你必须记住在哪些文件引用了该库, 如果项目不再依赖这个库时, 得去找到每一个引用该库的文件并删除该库的引用. 如果构建工具没设置正确, 可能导致该库的多份拷贝被引用.

优雅的方式

在 Vuejs 项目中使用 JavaScript 库的一个优雅方式是讲其代理到 Vue 的原型对象上去. 按照这种方式, 我们引入 Moment 库:

entry.js

import moment from 'moment'

Object.defineProperty(Vue.prototype, '$moment', { value: moment })

由于所有的组件都会从 Vue 的原型对象上继承它们的方法, 因此在所有组件/实例中都可以通过 this.$moment: 的方式访问 Moment 而不需要定义全局变量或者手动的引入.

MyNewComponent.vue

export default {

created() {

console.log('The time is ' . this.$moment().format("HH:mm"))

}

}

接下来就了解下这种方式的工作原理.

Object.defineProperty

一般而言, 可以按照下面的方式来给对象设置属性:

Vue.prototype.$moment = moment

可以这样做, 但是 Object.defineProperty 允许我们通过一个 descriptor 来定义属性. Descriptor 运行我们去设置对象属性的一些底层(low-level)细节, 如是否允许属性可写? 是否允许属性在 for 循环中被遍历.

通常, 我们不会为此感到困扰, 因为大部分时候, 对于属性赋值, 我们不需要考虑这样的细节. 但这有一个明显的优点: 通过 descriptor 创建的属性默认是只读的.

这就意味着, 一些处于迷糊状态的(coffee-deprived)开发者不能在组件内去做一些很愚蠢的事情, 就像这样:

this.$http = 'Assign some random thing to the instance method'

this.$http.get('/')// TypeError: this.$http.get is not a function

此外, 试图给只读实例的方法重新赋值会得到 TypeError: Cannot assign to read only property 的错误.

$

你可能会注意到, 代理第三库的属性会有一个 $ 前缀, 也可能看到其它类似 $refs, $on, $mount 的属性和方式, 它们也有这个前缀.

这个不是强制要求, 给属性添加 $ 前缀是提供那些处于迷糊状态(coffee-deprived)的开发者这是一个公开的 API, 和 Vuejs 的一些内部属性和方法区分开来.

this

你还可能注意到, 在组件内是通过 this.libraryName 的方式来使用第三方库的, 当你知道它是一个实例方法时就不会感到意外了. 但与全局变量不同, 通过 this 来使用第三方库时, 必须确保 this 处于正确的作用域. 在回调方法中 this 的作用域会有不同, 但箭头式回调风格能保证 this 的作用域是正确的:

this.$http.get('/').then(res =>{

if (res.status !== 200) {

this.$http.get('/') // etc

// Only works in a fat arrow callback.

}

})

插件

如果你想在多个项目中使用同一个库, 或者想将其分享给其他人, 可以将其写成一个插件:

import MyLibraryPlugin from 'my-library-plugin'

Vue.use(MyLibraryPlugin)

在应用的入口引入插件之后, 就可以在任何一个组件内像使用 Vue Router, Vuex 一样使用你定义的库了.

写一个插件

首先, 创建一个文件用于编写自己的插件. 在示例中, 我会将 Axios 作为插件添加到项目中, 因而我给文件起名为 axios.js. 其次, 插件要对外暴露一个 install 方法, 该方法的第一个参数是 Vue 的构造函数:

axios.js

import axios from 'axios'

export default {

install: function(Vue,) {

Object.defineProperty(Vue.prototype, '$http', { value: axios })

}

}

最后, 利用 Vue 的实例方法 use 将插件添加到项目中:

entry.js

import AxiosPlugin from './axios.js'

Vue.use(AxiosPlugin)

new Vue({

created() {

console.log(this.$http ? 'Axios works!' : 'Uh oh..')

}

})

---