目标网站:https://m.douban.com/
本篇弄完后的效果如下;
Github 地址:https://github.com/zhubangbang/douban-by-vue2
访问地址:https://zhubangbang.com/demo/douban/chapter_01/index.html#/movie
项目使用:vue-cli 这个脚手架工具完成基础配置
全局安装 vue-cli
npm install –g vue-cli
创建你的文件夹,cd 进入后
基于 webpack 生成项目:
vue init webpack
使用 npm 安装项目依赖包
npm install
启用本地开发环境的服务器(仅仅是模拟用的)
npm run dev
之所以可以使用 dev 因为脚手架工具默认帮我们配置好了,配置如下
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"lint": "eslint --ext .js,.vue src"
},
除了 dev 外还可以使用 start
npm run start
效果一样的;
文件作用如下
我们先开始搭建基础的骨架;
根目录下的 index.html 文件如下
因为是手机端的的项目,所以要加一个‘viewport’
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
修改后的 index 文件如下:
|
|
main.js 的文件引入基础的 css
import Vue from 'vue'
import App from './App'
import router from './router'
import '@/assets/css/index.css'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})
之所以使用 @是因为,vue 默认配置了这个快键方式,在 webpack.base.conf.js 中有如下代码段
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src')
}
},
是单文件的方式引入,
import '@/assets/css/index.css'
index.css 内的代码如下
@import "./reset.css";
@import "./iconfont.css";
我是在同级引入了 reset.css / reset.css
reset 文件如下
|
|
iconfont 是引入 iconfont 字体图标库
|
|
App.vue 文件如下:
|
|
这里引入了 MHeader 的文件;之所以不使用 header 而使用 m-header 作为组件名字,是因为 header 是原生的标签,在 vue 使用的时候会发生冲突;
但是使用 m-header 就绕过去了
<m-header></m-header>
m-header.vue 文件如下
|
|
router/index.js 这个路由下面的文件 如下;
|
|
其中组件 Movie Book Group 等组件内,只要能跑就可以了,目前只是弄骨架的;
如下面的
|
|
components 是业务组件;我们还需要一个基础组件的目录 (base)
home.vue 内的文件 如下
|
|
这里引入了一个”快速导航”的基础组件
quick-nav.vue 的文件 如下
|
|
搞好这些后,然后就开始 build
npm run build
build 后会生成一个 dist 文件;这个目录下面的文件就是需要发布的文件
dist/index.html 格式化后文件如下
|
|
我把文件的引入方式改为相对路径,扔在服务器上,就可以供访问了;
为了不和别的文件冲突,我的命名为第一章
GO,丢到服务器上就可以了
访问地址