该框架基于Vue2.0 + vue-route +webpack 搭建,作为脚手架的处理,用于快速搭建框架进行开发。
- 文件和应用组织:Vue2
- 构建系统:webpack
- 测试系统:暂无(Karma、Jasmine)
确保 Node的版本>=5.0 且 Npm的版本>=3
克隆/下载仓库,然后编辑
main.js
里面的/src/main.js
# 克隆我的仓库
# --depth 1 removes all but one .git commit history
git clone --depth 1 https://github.com/jianxuanbing/VueFramework.git
# 更改我们的仓库目录
cd VueFramework
# 安装仓库中的npm的配置信息
npm install
npm install [name] -g
npm install [name] --save
npm install [name] --save-dev
# 如因墙的原因可使用cnpm进行安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install
cnpm install [name]
# 启动服务器
npm start
前往 http://0.0.0.0:8991 或者 http://localhost:8991 进行浏览
我们使用组件的方式启动。这是开发Vue应用程序的新标准,以确保我们的行为逻辑的可维护的代码封装。如下面文件目录:
ng2Framework/
├──build/ * 存放构建文件:目录
| ├──build.js * 生成文件
| ├──dev-client.js * 开发客户端用于热加载
| ├──dev-server.js * 开发服务端,启用网站
| ├──utils.js * 工具类,用于加载自定义的加载器
| ├──webpack.base.conf.js * webpack 基本配置,用于继承
| ├──webpack.dev.conf.js * webpack 开发配置,用于开发,临时打包
| └──webpack.prod.conf.js * webpack 产品配置,用于发布时,打包使用
|
├──config/ * 存放配置文件:目录
| ├──index.js * 基本路径信息
│ ├──dev.env.js * webpack 开发环境配置
│ ├──prod.env.js * webpack 生产环境配置
│ └──test.env.js * webpack 测试环境配置
│
├──dist/ * 生成文件:目录
├──src/ * 源文件:目录
│ ├──assets/ * 静态资源:目录
│ │ ├──css/ * 通用样式文件:目录
│ │ ├──images/ * 图片文件:目录
│ | ├──fonts/ * 字体文件:目录
│ │ └──icon/ * 图标:目录
│ │
| ├──components/ * 自定义组件:目录
| ├──views/ * 视图:目录 组装组件成一个视图
| ├──App.vue * App.vue:根应用程序组件
| ├──index.html * 索引页,用于生成索引页面
| ├──main.js * 应用程序入口文件,定义Vue以及路由
| ├──route-config.js * Vue-route 路由配置
| ├──test.html * 测试索引页,用于生成索引页面
| └──test.js * 测试应用程序入口文件,定义Vue以及路由
│
├──static/ * 通用静态资源文件:目录
│ ├──css/ * 通用样式文件:目录
│ ├──images/ * 图片文件:目录
│ ├──fonts/ * 字体文件:目录
│ └──icon/ * 图标:目录
|
|──.babelrc * babel 配置
|──.editorconfig * 编辑配置
|──.eslintignore * eslint 的忽略配置
|──.eslintrc.js * eslint 的规则
├──package.json * 搭建环境需要的npm依赖项
└──config.js * webpack 生成配置
你需要运行这个程序:
node
和npm
(brew install node
)- 确保你运行最新版本的 Node
v4.x.x
+ (或v5.x.x
) 和 NPM3.x.x
+
如果你安装了
nvm
,强烈推荐(brew install node
) 你能执行nvm install --lts && nvm use
在$
运行最新的Node。
一旦你有了这些,你应该安装这些全局变量 npm install --global
:
webpack
(npm install --global webpack
)webpack-dev-server
(npm install --global webpack-dev-server
)
fork
分支仓库clone
克隆仓库npm install webpack-dev-server -g
安装必须的全局依赖关系npm install
安装所有依赖npm run server
启动开发服务器
在您安装所有的依赖项后,现在可以运行应用程序。
运行 npm run server
命令启动本地服务使用 webpack-dev-server
,构建在内存当中。
服务地址默认为:http://0.0.0.0:9060
(或如果你喜欢IPV6,你可以使用 express
服务器,那么地址为:http://[::1]:9060/
)。
# 开发环境
npm run server
# 生产环境
npm run build:prod
npm run server:prod