我理解的全栈就是在公司的一块砖,哪里需要往哪里搬,最近公司需要在APP上做数据统计相关的业务,由于是要在移动端使用,所以初期选择框架的时候,沿用了我们微信公众号的项目框架:webpack + vuejs + vue-router(vue 1.0)来构建单页,本人环境macos ,node版本 v7.4.0,下面就进入正题......
参考资料
1. vuejs v1官网 http://v1-cn.vuejs.org/guide/installation.html
2. vue-router 1.0 https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn
安装
首先我们需要的是nodejs和git的基础环境,如果没有安装的童鞋,请自行查找相关安装资料以及npm的使用方法。
# 全局安装 vue-cli
$ npm install -g vue-cli
# 创建一个基于 "webpack" 模板的新项目
$ vue init webpack#1.0 my-project
$cd my-project
# 这里需要注意一下,mac上最新安装的npm执行 npm install 只安装了 dependences里面的依赖,如果没有安全 devDependences中的依赖,请执行 npm install --only=dev
$ npm install
这里会遇到npm下载很慢的问题,可以参考这里切换npm源
运行
运行只需要一个命令
$ npm run dev
看到启动成功的日志之后,即可在浏览器中输入: http://localhost:8080 查看效果
修改
到现在万事具备,只欠东风(vue-router)了,前面做了很多工作,但是你会发现都是敲敲命令行的事情,接下来我需要集成vue-router。
1. 安装vue-router依赖
# 注意我们是需要安装 vue 1.0 相关依赖,所以需要制定版本
$ npm install --save vue-router@0.7.13
2. 配置router
修改在项目的 src 目录中的 main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import Routers from './router'; // router.js
Vue.use(VueRouter);
// 路由配置
let router = new VueRouter({
// 是否开启History模式的路由,默认开发环境开启,生产环境不开启。如果生产环境的服务端没有进行相关配置,请慎用
history: true,
canReuse: true
});
router.map(Routers);
router.start(App, '#app');
router.js配置如下
const routers = {
'/index': {
component (resolve) {
require(['./components/Index.vue'], resolve);
}}};
export default routers;
在components目录中新建Index.vue
在template标签中输入任意字符串,在浏览器上 输入地址 http://localhost:8080/index 即可看到你输入的内容(这里不懂的去看一下vue)
打包
$ npm run build
打包完成之后默认是 dist目录,dist就可以发布到生产环境了。