vue2重写cnodejs社区app
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue2重写cnodejs社区app相关的知识，希望对你有一定的参考价值。
参考原作者开源代码：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 point const Home = resolve => { require.ensure([‘../components/index.vue‘], () => { resolve(require(‘../components/index.vue‘)); }); }; // 按照AMD规范的写法 const Home = resolve => require([‘../components/Index.vue‘],resolve);
以上是关于vue2重写cnodejs社区app的主要内容，如果未能解决你的问题，请参考以下文章
Node.JS自动化测试在CNode社区中的应用 -- CnodeJS线下沙龙活动