├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── README.md ├── build ├── build.js ├── check-versions.js ├── dev-client.js ├── dev-server.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── favicon.ico ├── images └── douban.gif ├── index.html ├── package.json ├── src ├── App.vue ├── assets │ └── logo.png ├── common │ ├── element-ui-import.js │ └── util.js ├── components │ ├── common │ │ ├── movieComment.vue │ │ ├── moviesDetail.vue │ │ ├── moviesTag.vue │ │ ├── searchTag.vue │ │ └── upComingTag.vue │ ├── moving.vue │ ├── searchList.vue │ ├── top250.vue │ └── upcoming.vue ├── header.vue ├── main.js ├── router │ ├── index.js │ └── routerMap.js └── store │ ├── index.js │ └── moving │ ├── actions.js │ ├── getters.js │ ├── index.js │ ├── mutations.js │ └── types.js ├── static └── .gitkeep └── style ├── base.less └── color.less /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-2" 5 | ], 6 | "plugins": [["component", [ 7 | { 8 | "libraryName": "element-ui", 9 | "styleLibraryName": "theme-default" 10 | } 11 | ]]], 12 | "comments": false, 13 | "env": { 14 | "test": { 15 | "presets": ["env", "stage-2"], 16 | "plugins": [ "istanbul" ] 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // http://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 13 | extends: 'standard', 14 | // required to lint *.vue files 15 | plugins: [ 16 | 'html' 17 | ], 18 | // add your custom rules here 19 | 'rules': { 20 | // allow paren-less arrow functions 21 | 'arrow-parens': 0, 22 | // allow async-await 23 | 'generator-star-spacing': 0, 24 | // allow debugger during development 25 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.class 2 | .DS_Store 3 | node_modules/ 4 | dist/ 5 | npm-debug.log 6 | yarn-error.log 7 | # Package Files # 8 | *.jar 9 | *.war 10 | *.ear 11 | .project 12 | .classpath 13 | .settings 14 | .pydevproject 15 | target 16 | .DS_Store 17 | dist 18 | /dist/ 19 | logs 20 | *.log 21 | bin 22 | node_modules 23 | /node_nodules/ 24 | # idea # 25 | .idea 26 | *.iml 27 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserlist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 豆瓣电影简单展示 2 | > this is doubanMovie show By vue2.0 3 | # 演示地址 4 | [豆瓣电影](http://139.199.163.228:8081/) 5 | 服务器欠费了，没有继续续费了，想要看效果的小伙伴可以fork下来在本地run dev 一下。 6 | ## 安装步骤 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | ``` 20 | 21 | ### 使用技术简介 （vue2.x + webpack2.x + vue-resource + vue-router + vuex + Element-UI） 22 | ### 项目简单演示 23 | ![img](https://github.com/monkeyWangs/doubanMovie/blob/master/images/douban.gif) 24 | 25 | # 教程 26 | 27 | 28 | ## 安装 vue-cli 脚手架 29 | 30 | 31 | 运行如下命令，即可创建一个名为 doubanMovie 的 vue 项目，并且通过本地 8080 端口启动服务 32 | 33 | ``` bash 34 | npm install -g vue-cli 35 | vue init webpack doubanMovie 36 | cd doubanMovie 37 | npm install 38 | npm run dev 39 | ``` 40 | 41 | 42 | 在运行 `vue init webpack doubanMovie` 后，会依次要求输入以下配置内容 43 | - 项目名称 44 | - 项目描述 45 | - 作者 46 | - 选择 Vue 构建：运行+编译 或 仅运行时 47 | - 是否安装 vue-loader 48 | - 是否使用 ESLint 49 | - 如果是，请选择模式：标准模式、AirBNB 模式、自定义 50 | - 是否使用 Karma + Mocha 的单元测试 51 | - 是否使用 Nightwatch e2e 测试 52 | 53 | 54 | 55 | 安装完成后，即可看到以下文件结构： 56 | 57 | ``` 58 | . 59 | |-- build // 项目构建相关代码 60 | | |-- build.js // 生产环境构建代码 61 | | |-- check-version.js // 检查 node、npm 等版本 62 | | |-- dev-client.js // 热重载相关 63 | | |-- dev-server.js // 构建本地服务器 64 | | |-- utils.js // 构建工具相关 65 | | |-- webpack.base.conf.js // webpack 基础配置（出入口和 loader） 66 | | |-- webpack.dev.conf.js // webpack 开发环境配置 67 | | |-- webpack.prod.conf.js // webpack 生产环境配置 68 | |-- config // 项目开发环境配置 69 | | |-- dev.env.js // 开发环境变量 70 | | |-- index.js // 项目一些配置变量（开发环境接口转发将在此配置） 71 | | |-- prod.env.js // 生产环境变量 72 | | |-- test.env.js // 测试环境变量 73 | |-- src // 源码目录 74 | | |-- components // vue 公共组件 75 | | |-- App.vue // 页面入口文件 76 | | |-- main.js // 程序入口文件，加载各种公共组件 77 | |-- static // 静态文件，比如一些图片，json数据等 78 | |-- test // 自动化测试相关文件 79 | |-- .babelrc // ES6语法编译配置 80 | |-- .editorconfig // 定义代码格式 81 | |-- .eslintignore // ESLint 检查忽略的文件 82 | |-- .eslistrc.js // ESLint 文件，如需更改规则则在此文件添加 83 | |-- .gitignore // git 上传需要忽略的文件 84 | |-- README.md // 项目说明 85 | |-- index.html // 入口页面 86 | |-- package.json // 项目基本信息 87 | . 88 | ``` 89 | 90 | ## ESLint 配置 91 | 92 | ESLint 配置在根目录的 `.eslintrc.js` 里。 93 | 正常情况下，ESLint 报错是因为你的代码不符合现有的 ESLint 规范。当然在开发的过程中，ESlint能够很好地规范你的代码，对于新手来说可能有点别扭，但是习惯了可以极大地提升代码的可读性。 94 | 95 | ## 静态页面开发   96 | 97 | 此时，浏览器应该已经打开了 localhost:8080 页面。 98 | 99 | 在此情况下，请尝试更改 `/src/App.vue` 和 `/src/components/Hello.vue` 文件中`