標籤：advance 修改 ons http 學習 設定 pac javascrip lazy
參考原作者開原始碼：https://github.com/shinygang/Vue-cnodejs
以學習、練習、提高為目的的學習性項目
node：v6.9.5 npm:3.10.10 vue:2.8.1
1.項目搭建
安裝vue-cli腳手架 npm i vue-cli -g
建立一個 webpack 項目並且下載依賴 vue init webpack vue-cnodejs
安裝依賴 cd vue-cnodejs
npm i
暖開機 npm run dev 成功彈出網頁則搭建成功
安裝 vuex npm i vuex --save
fastclick消除點擊延遲
zepto輕量級相容jQuery的JavaScript庫
安裝sass載入器 npm install node-sass --save-dev
npm install sass-loader --save-dev
在.vue檔案中通過<style lang="scss"></style>使用
// build/webpack.base.conf.js module: { rules: [ ... { test: /\.scss$/, loaders: ["style", "css", "sass"] }, ... ] }
2.初始化
對index.html和main.js進行修改，不再使用App.vue作為初始化組件，直接將index.vue作為初始化組件使用
//index.html
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue-cnodejs</title> </head> <body> <div id="app" v-cloak> <router-view></router-view> </div> <!-- built files will be auto injected --> </body></html>
對路由進行懶載入，在這裡對原作者的寫法進行了改變，具體的內容可以參考 http://router.vuejs.org/zh-cn/advanced/lazy-loading.html
另外，對原作者的目錄結構進行了一些改變，合并了components和views目錄（沒能領會原作者分開的原因）
// 原作者寫法// require.ensure 是 Webpack 的特殊文法，用來設定 code-split pointconst Home = resolve => { require.ensure([‘../components/index.vue‘], () => { resolve(require(‘../components/index.vue‘)); });};// 按照AMD規範的寫法const Home = resolve => require([‘../components/Index.vue‘],resolve);
vue2重寫cnodejs社區app
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
