vue2.0環境構築(routerルーティングを含む)
今、この四海八荒はvueを使っていますね.年前に私の手元は新しく1つの运営のプラットフォームをして、スクリーンショットは以下のようにして、前后に分离して、半日の力を费やしてやっと环境を建てて、年后に工夫があって、わざわざ整理して、みんなが少し回り道を歩かないことを望みます!
一、環境の構築
公式の足場cliで一歩一歩流れて、私が整理した流れは以下の通りです.公式サイトの指導を参照してください.https://cn.vuejs.org/v2/guide/installation.html#NPM
1.npm install vue-cli webpack-g(vue足場とwebpackをグローバルにインストール)2.プロジェクトディレクトリvue init webpack my-project(初期化、入力ありなし)3に入ります.cd my-project 4. npm install(インストール項目依存、必ずnpmを使う、比較的遅い)5.npm install vue-router vue-resource--save-dev(vueルーティングモジュールvue-routerとネットワークリクエストモジュールvue-resourceをインストール)6.npm run dev(ローカル運転)7.npm run build(サーバbuildを生成)
二、ルート構成
前に環境を構築するときにrouterをインストールしたので、構成で直接呼び出せばいいので、公式指導とdemoを参考にしてください.https://router.vuejs.org/zh-cn/essentials/getting-started.html
コードに会社のインタフェースが多すぎるので、ルーティングコードの一部しか表示しません.framework.vueはルーティングのdomレイヤ、main.jsはルーティング構成層
1.framework.vue
2.main.js
三、ログイン検証
前後が分離されている以上、ログイン状態の検証は当然フロントエンドに置かれる.ここでは、ユーザがログインした後、サービス側からtokenがブラウザに生成され、フロントエンド側はルーティングジャンプのたびにtokenを取得し、存在する場合はログイン状態が存在する場合はnext()が継続し、そうでない場合は/logInページを指す.
四、この文章はまずルートをここに紹介して、後で私は構築の過程で踏んだ穴を整理します!
一、環境の構築
公式の足場cliで一歩一歩流れて、私が整理した流れは以下の通りです.公式サイトの指導を参照してください.https://cn.vuejs.org/v2/guide/installation.html#NPM
1.npm install vue-cli webpack-g(vue足場とwebpackをグローバルにインストール)2.プロジェクトディレクトリvue init webpack my-project(初期化、入力ありなし)3に入ります.cd my-project 4. npm install(インストール項目依存、必ずnpmを使う、比較的遅い)5.npm install vue-router vue-resource--save-dev(vueルーティングモジュールvue-routerとネットワークリクエストモジュールvue-resourceをインストール)6.npm run dev(ローカル運転)7.npm run build(サーバbuildを生成)
二、ルート構成
前に環境を構築するときにrouterをインストールしたので、構成で直接呼び出せばいいので、公式指導とdemoを参考にしてください.https://router.vuejs.org/zh-cn/essentials/getting-started.html
コードに会社のインタフェースが多すぎるので、ルーティングコードの一部しか表示しません.framework.vueはルーティングのdomレイヤ、main.jsはルーティング構成層
1.framework.vue
2.main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
// import createHello from './components/hello/hello.js'
import util from './service/util'
import loadingHourGlass from './components/loading_hourglass'
Vue.component('loadingHourGlass', loadingHourGlass)
// import cookieParser from 'cookie-parser'
// Vue.component('hello', hello);
// Vue.prototype.util = util;
Vue.use(VueRouter);
Vue.config.debug = true;
//const Foo = resolve => require(['./template/template1.vue'], resolve)
// const Bar = resolve => require(['./template/template2.vue'], resolve)
// const User = { template: 'User' }
// const Quux = { template: 'quux' }
// const logIn = { template: 'logIn' }
const page404 = { template: 'page404' }
const routes = [
{ //
path: '/logIn', component: resolve => require(['./template/login.vue'], resolve)
},
{
path: '/framework',
component: resolve => require(['./template/framework.vue'], resolve),
children:[
{
path: '/home',
component: resolve => require(['./template/home.vue'], resolve)
},
{
path:'/stat',
component: resolve => require(['./template/stat/view.vue'], resolve),
redirect: '/stat/bandWidth',
children:[
{ path: 'bandWidth', component: resolve => require(['./template/stat/band_width.vue'], resolve)}
]
},
{
path:'/monitor',
component: resolve => require(['./template/monitor/view.vue'], resolve),
redirect: '/monitor/pingInfo',
children:[
{ path: 'pingInfo', component: resolve => require(['./template/monitor/ping_info.vue'], resolve)}
]
},
{
path: '/conf/ats',
component: resolve => require(['./template/conf/ats/view.vue'], resolve),
redirect: '/conf/ats/info',
children:[
{ path: 'info', component: resolve => require(['./template/conf/ats/info.vue'], resolve) },
{ path: 'grey', component: resolve => require(['./template/conf/ats/grey.vue'], resolve) },
{ path: 'status', component: resolve => require(['./template/conf/ats/status.vue'], resolve) }
]
},
{
path: '/conf/returnOrig',
component: resolve => require(['./template/conf/return_orig/view.vue'], resolve),
redirect: '/conf/returnOrig/core',
children:[
{ path: 'fileCore', component: resolve => require(['./template/conf/return_orig/file_core.vue'], resolve) },
{ path: 'core', component: resolve => require(['./template/conf/return_orig/core.vue'], resolve) },
{ path: 'area', component: resolve => require(['./template/conf/return_orig/area.vue'], resolve) },
{ path: 'province', component: resolve => require(['./template/conf/return_orig/province.vue'], resolve) },
{ path: 'singlePoint', component: resolve => require(['./template/conf/return_orig/single_point.vue'], resolve) },
{ path: 'idc', component: resolve => require(['./template/conf/return_orig/idc.vue'], resolve) },
{ path: 'group', component: resolve => require(['./template/conf/return_orig/group.vue'], resolve) }
]
},
{
path: '/conf/domain',
component: resolve => require(['./template/conf/domain/view.vue'], resolve),
redirect: '/conf/domain/info',
children:[
{ path: 'info', component: resolve => require(['./template/conf/domain/info.vue'], resolve) }
]
},
{
path: '/dispatch/node',
component: resolve => require(['./template/dispatch/node/view.vue'], resolve),
redirect: '/dispatch/node/info',
children:[
{ path: 'info', component: resolve => require(['./template/dispatch/node/info.vue'], resolve) }
]
},
{
path: '/dispatch/lvs',
component: resolve => require(['./template/dispatch/lvs/view.vue'], resolve),
redirect: '/dispatch/lvs/info',
children:[
{ path: 'info', component: resolve => require(['./template/dispatch/lvs/info.vue'], resolve) }
]
},
{
path: '/tool',
component: resolve => require(['./template/tool/task_refresh/view.vue'], resolve),
redirect: '/tool/taskRefresh',
children:[
{ path: 'taskRefresh', component: resolve => require(['./template/tool/task_refresh/info.vue'], resolve) }
]
},
{
path: '/lemonTest',
component: resolve => require(['./template/else/view.vue'], resolve),
redirect: '/lemonTest/test1',
children:[
{ path: 'test1', component: resolve => require(['./template/else/test1.vue'], resolve) },
{ path: 'test2', component: resolve => require(['./template/else/test2.vue'], resolve) },
{ path: 'test3', component: resolve => require(['./template/else/test3.vue'], resolve) }
]
}
]
},
{ //
path: '/', redirect: '/home'
},
{ //
path: '*', component: page404
},
]
const router = new VueRouter({
routes: routes,
linkActiveClass: "v-link-active", // （ ） routes: routes
})
router.beforeEach((to, from, next) => {
var token = util.getCookie('token')
if (token || to.path == '/logIn'){
console.log(' ， ' + to.path)
next()
}
else{
console.log('cookie token， ')
router.push({path:'/logIn'});
}
})
const app = new Vue({
router: router,
render: h => h(App)
}).$mount('#app')
三、ログイン検証
前後が分離されている以上、ログイン状態の検証は当然フロントエンドに置かれる.ここでは、ユーザがログインした後、サービス側からtokenがブラウザに生成され、フロントエンド側はルーティングジャンプのたびにtokenを取得し、存在する場合はログイン状態が存在する場合はnext()が継続し、そうでない場合は/logInページを指す.
四、この文章はまずルートをここに紹介して、後で私は構築の過程で踏んだ穴を整理します!