vue官方只提供了单页面的脚手架，但我们可以根据它来改造成多页面，开发的时候我们每次只开发一个页面，而不是同时开发多个页面，所以项目根路径下应该有个配置js，来指明这次要开发的页面
- 最新版webstorm
- 使用yarn安装依赖（提供lock功能） 国内用户请使用淘宝源
yarn config set registry https://registry.npm.taobao.org - node-sass安装失败解决方案
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass
这是一个vue-cli.的项目模板
$ npm install -g vue-cli
$ vue init agileago/webpack-mutiple my-project
$ cd my-project
$ npm install （或者 yarn）
$ npm run vendor
$ npm run dev
$ npm run build配置在config.js里面
/**
* 需要构建的页面 一次只构建一个页面
*/
const pageName = 'index'
// 大部分情况下都是默认配置
const notUseVendor = [] // 不使用公共资源的页面集合
const notExtractCss = [] // 不抽取css的页面
const useAbsolutePath = { // 使用绝对路径的页面
example: '//cdn.com/'
}
module.exports = {
pageName: pageName,
useVendor: notUseVendor.indexOf(pageName) === -1, // 是否使用公共资源 需要先运行 np run vendor
extractCss: notExtractCss.indexOf(pageName) === -1, // 是否抽取出css
// 资源引用路径是否为绝对路径 默认为相对路径
// cdn 地址 绝对路径的地址 如果没有cdn域名请填写 / 默认是相对路径 false
absolutePath: useAbsolutePath[pageName] == undefined ? false : useAbsolutePath[pageName],
sourceMap: false, // 生产环境下是否需要js生成sourceMap
browsers: ['ios > 7', 'android > 4.1']
}多个页面需要共享资源库，利用webpack的dll功能生成vendor, vendor的配置在 package.json中的vendor选项
"vendor": [
"vue",
"es6-promise",
"weui"
],每做一个新页面需要在src/views/下面生成一个页面文件夹，文件夹里面需要包含一个入口文件 main.js 和页面模板文件 template.html,具体请看index示例页面
当想在工程里面引入node_modules下工程某些源代码,但这些源代码有可能是es6语法的,可直接在webpack的
loader里面添加
{
test: /vux.src.*?js$/,
loader: 'babel-loader'
}就是模块名 . 源码文件夹 js文件
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent