参考原作者开源代码：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);
时间： 2024-10-15 01:01:13