? ? ? ?我理解的全棧就是在公司的一塊磚嬉愧，哪里需要往哪里搬贩挣，最近公司需要在APP上做數(shù)據(jù)統(tǒng)計相關(guān)的業(yè)務，由于是要在移動端使用，所以初期選擇框架的時候王财，沿用了我們微信公眾號的項目框架：webpack + vuejs + vue-router（vue 1.0）來構(gòu)建單頁卵迂，本人環(huán)境macos ，node版本 v7.4.0绒净，下面就進入正題......
參考資料
1. vuejs v1官網(wǎng)? 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的基礎(chǔ)環(huán)境见咒，如果沒有安裝的童鞋，請自行查找相關(guān)安裝資料以及npm的使用方法挂疆。
# 全局安裝 vue-cli
$ npm install -g vue-cli
# 創(chuàng)建一個基于 "webpack" 模板的新項目
$ vue init webpack#1.0 my-project
$cd my-project
# 這里需要注意一下改览，mac上最新安裝的npm執(zhí)行 ?npm install 只安裝了 dependences里面的依賴，如果沒有安全 devDependences中的依賴缤言，請執(zhí)行 npm install --only=dev
$ npm install
這里會遇到npm下載很慢的問題宝当，可以參考這里切換npm源
運行
運行只需要一個命令
$ npm run dev
? ? ?看到啟動成功的日志之后，即可在瀏覽器中輸入： http://localhost:8080 查看效果
修改
? ? ? 到現(xiàn)在萬事具備胆萧，只欠東風（vue-router）了庆揩，前面做了很多工作，但是你會發(fā)現(xiàn)都是敲敲命令行的事情跌穗，接下來我需要集成vue-router订晌。
1. 安裝vue-router依賴
# 注意我們是需要安裝 vue 1.0 相關(guān)依賴，所以需要制定版本
$ 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模式的路由,默認開發(fā)環(huán)境開啟,生產(chǎn)環(huán)境不開啟蚌吸。如果生產(chǎn)環(huán)境的服務端沒有進行相關(guān)配置,請慎用
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 即可看到你輸入的內(nèi)容（這里不懂的去看一下vue）
打包
$ npm run build
打包完成之后默認是 dist目錄，dist就可以發(fā)布到生產(chǎn)環(huán)境了羹唠。
