webpack and vue 应用

webpack 学习

简单了解使用

可以兼容amd,cmd,es6 的写法

在开发环境中使用压缩文件

为了不让 Webpack 去遍历 React JS 及其所有依赖，你可以在开发中重写它的行为 var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js'); resolve: { alias: { 'react': pathToReact } }, noParse: [pathToReact]

运行应用

设置 package.json scripts

#例子1

• 安装npm webpack

• "scripts": { "build": "webpack" }

• npm run build==webpack 进行编译运行(注意 NPM 会找到 Webpack，npm run 会把他临时加到 PATH来让我们这个神奇的命令工作)

#例子2

• 一直npm run build(webpack)蛋疼,不够智能,自动编译--->服务webpack-dev-serve
• { "scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build" } }

1.webpack-dev-server - 在 localhost:8080 建立一个 Web 服务器

2.--devtool eval - 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号

3.--progress - 显示合并代码进度

4.--colors - Yay，命令行中显示颜色！

5.--content-base build - 指向设置的输出目录

• 总的来说，当你运行 npm run dev 的时候，会启动一个 Web 服务器，然后监听文件修改，然后自动重新合并你的代码。真的非常简洁！用于解决方案一的弊端

#例子3(创建生产配置)

"scripts": { "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build", "prd": "NODE_ENV=prduction webpack -p --config webpack.production.config.js" }, "devDependencies": { "webpack": "^1.4.13", "webpack-dev-server": "^1.6.6" }, "dependencies": {} [学习小记]--save-dev和--save区别 前者放在devDependencies里面,后者放在package.json 的dependencies【表面】，产品模式用dependencies，开发模式用devDep 正如你所见，我们只是用生产参数运行 Webpack 来指向另一个配置文件。我们也使用了环境变量 “production” 来让我们的模块自动去优化。让我们开始来创建配置文件。

当项目越发复杂的时候，这样的方法会变得越来越有效。你可以把所有复杂的操作隐藏在 scripts 里面来保证界面的简洁。 但是有些命令只能运行特殊环境(存在环境不兼容问题)，使用gulp-webpack--->使用gulp通过gulp-webpack启动gulp-webpack.

vue 学习

组件使用

1.定义 var myComponent=Vue.extend({//...});

var MyComponent = Vue.extend({    template: '<div>A custom component!</div>'  })

2.注册 Vue.component('my-component',myComponent);

Vue.component('my-component', MyComponent)

3.使用 HTML

Html

<my-component></my-component>  new Vue({    el: '#example'  })

==>

<div id="example">    <div>A custom component!</div>  </div>

定义和注册

Vue.component('my-component', {    template: '<div>A custom component!</div>'  })

局部组件

var Child = Vue.extend({ /* ... */ })    var Parent = Vue.extend({    template: '...',    components: {      // <my-component> 只能用在父组件模板内      'my-component': Child    }  })

var Parent = Vue.extend({    components: {      'my-component': {        template: '<div>A custom component!</div>'      }    }  })

项目地址： https://github.com/weiqingting/vue-webpack-spm