├── dist ├── favicon.ico ├── css │ ├── app.fc5f47a8.css │ └── chunk-vendors.af3876eb.css ├── index.html └── js │ ├── app.4ab67c5f.js │ └── app.4ab67c5f.js.map ├── screenshot ├── 1.gif ├── 2.gif ├── 3.gif ├── 4.gif ├── 5.gif └── 6.png ├── public ├── favicon.ico └── index.html ├── src ├── assets │ └── logo.png ├── main.js ├── stores │ └── index.js ├── App.vue └── components │ ├── Header.vue │ ├── Search.vue │ └── Panel.vue ├── babel.config.js ├── vue.config.js ├── .gitignore ├── package.json └── README.md /dist/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wscats/vue-cli/HEAD/dist/favicon.ico -------------------------------------------------------------------------------- /screenshot/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wscats/vue-cli/HEAD/screenshot/1.gif -------------------------------------------------------------------------------- /screenshot/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wscats/vue-cli/HEAD/screenshot/2.gif -------------------------------------------------------------------------------- /screenshot/3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wscats/vue-cli/HEAD/screenshot/3.gif -------------------------------------------------------------------------------- /screenshot/4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wscats/vue-cli/HEAD/screenshot/4.gif -------------------------------------------------------------------------------- /screenshot/5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wscats/vue-cli/HEAD/screenshot/5.gif -------------------------------------------------------------------------------- /screenshot/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wscats/vue-cli/HEAD/screenshot/6.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wscats/vue-cli/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wscats/vue-cli/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /dist/css/app.fc5f47a8.css: -------------------------------------------------------------------------------- 1 | header[data-v-78cb6ec7]{height:50px;width:100%;line-height:50px;text-align:center;color:#fff} -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: process.env.NODE_ENV === 'production' 3 | ? './' 4 | : '/' 5 | } -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import 'weui' 4 | import VueCompositionApi from '@vue/composition-api' 5 | 6 | Vue.config.productionTip = false 7 | Vue.use(VueCompositionApi) 8 | 9 | new Vue({ 10 | render: h => h(App), 11 | }).$mount('#app') 12 | -------------------------------------------------------------------------------- /src/stores/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | state: { 3 | searchValue: "" 4 | }, 5 | // 设置搜索框的值 6 | setSearchValue(value) { 7 | this.state.searchValue = value 8 | }, 9 | // 获取搜索框的值 10 | getSearchValue() { 11 | return this.state.searchValue 12 | } 13 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | # /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 21 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-project 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 6 | 26 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | vue-project
-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-project", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "@vue/composition-api": "^0.3.4", 12 | "axios": "^0.19.0", 13 | "core-js": "^3.4.3", 14 | "vue": "^2.6.10", 15 | "weui": "^2.1.3" 16 | }, 17 | "devDependencies": { 18 | "@vue/cli-plugin-babel": "^4.1.0", 19 | "@vue/cli-plugin-eslint": "^4.1.0", 20 | "@vue/cli-service": "^4.1.0", 21 | "babel-eslint": "^10.0.3", 22 | "eslint": "^5.16.0", 23 | "eslint-plugin-vue": "^5.0.0", 24 | "vue-template-compiler": "^2.6.10" 25 | }, 26 | "eslintConfig": { 27 | "root": true, 28 | "env": { 29 | "node": true 30 | }, 31 | "extends": [ 32 | "plugin:vue/essential", 33 | "eslint:recommended" 34 | ], 35 | "rules": {}, 36 | "parserOptions": { 37 | "parser": "babel-eslint" 38 | } 39 | }, 40 | "browserslist": [ 41 | "> 1%", 42 | "last 2 versions" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /src/components/Search.vue: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /src/components/Panel.vue: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /dist/js/app.4ab67c5f.js: -------------------------------------------------------------------------------- 1 | (function(e){function t(t){for(var a,s,i=t[0],o=t[1],u=t[2],p=0,f=[];p=0)return e})):e.news})),searchValue:j.state}),t=function(){var t;return regeneratorRuntime.async((function(r){while(1)switch(r.prev=r.next){case 0:return r.next=2,regeneratorRuntime.awrap(k.a.get("https://cnodejs.org/api/v1/topics",{params:{limit:10,page:e.page}}));case 2:t=r.sent,e.page+=1,e.news=[].concat(Object(V["a"])(e.news),Object(V["a"])(t.data.data));case 5:case"end":return r.stop()}}))};return Object(u["c"])((function(){t()})),M({},Object(u["e"])(e),{loadMore:t})}},F=$,T=Object(d["a"])(F,x,S,!1,null,null,null),H=T.exports,J={name:"app",components:{Header:O,Search:C,Panel:H}},R=J,q=Object(d["a"])(R,n,c,!1,null,null,null),B=q.exports;r("0540");a["a"].config.productionTip=!1,a["a"].use(u["b"]),new a["a"]({render:function(e){return e(B)}}).$mount("#app")},"5be6":function(e,t,r){"use strict";var a=r("6963"),n=r.n(a);n.a},6963:function(e,t,r){}}); 2 | //# sourceMappingURL=app.4ab67c5f.js.map -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Quick Start 2 | 3 | - 项目源码: [https://github.com/Wscats/vue-cli](https://github.com/Wscats/vue-cli) 4 | 5 | 本项目综合运用了 `Vue3.0` 的新特性，适合新手学习😁 6 | 7 | - 基于 `Composition API` 即 `Function-based API` 进行改造，配合 `Vue Cli`，优先体验 `Vue3` 特性 8 | - 使用单例对象模式进行组件通信 9 | - 使用 `axios` 库进行网络请求，`weui` 库实现 UI 界面 10 | 11 | ```bash 12 | # 安装依赖 13 | npm install 14 | # 在浏览器打开localhost:8080查看页面，并实时热更新 15 | npm run serve 16 | # 发布项目 17 | npm run build 18 | ``` 19 | 20 | 建议配合 Visual Studio Code 和 [Vue 3 Snippets](https://github.com/Wscats/vue-snippets) 代码插件食用Ψ(￣∀￣)Ψ。 21 | 22 | # Dependencies 23 | 24 | 以下是项目运用到的依赖，`@vue/composition-api` 配合 `vue` 模块让我们 `Vue2.0` 版本可以抢先体验 `Vue3.0` 的新特性，`axios` 是辅助我们发送网络请求得到数据的工具库，`weui`是一套与微信原生视觉一致的基础样式库，方便我们快速搭建项目页面。 25 | 26 | ```js 27 | "@vue/composition-api": "^0.3.4", 28 | "axios": "^0.19.0", 29 | "core-js": "^3.4.3", 30 | "vue": "^2.6.10", 31 | "weui": "^2.1.3" 32 | ``` 33 | 34 | # Directory Structure 35 | 36 | ```js 37 | ├── src 38 | │ ├── App.vue # 组件入口 39 | │ ├── assets # 资源目录 40 | │ ├── stores/index.js # 状态管理 41 | │ ├── components # 组件目录 42 | │ │ ├── Header.vue # 头部组件 43 | │ │ ├── Search.vue # 搜索框组件 44 | │ │ ├── Panel.vue # 列表组件 45 | │ ├── main.js # 项目入口 46 | ├── public # 模板文件 47 | ├── vue.config.js # 脚手架配置文件 48 | ├── screenshot # 程序截图 49 | ``` 50 | 51 | 52 | # Composition API 53 | 54 | ```bash 55 | npm install @vue/composition-api --save 56 | ``` 57 | 58 | 使用 `npm` 命令下载了 `@vue/composition-api` 插件以后，引入该模块后，需要显式调用 `Vue.use(VueCompositionApi)` ，按照文档在 `main.js` 引用便开启了 `Composition API` 的能力。 59 | ```js 60 | // main.js 61 | import Vue from 'vue' 62 | import App from './App.vue' 63 | // 1.引入Composition API模块 64 | import VueCompositionApi from '@vue/composition-api' 65 | 66 | Vue.config.productionTip = false 67 | // 2.不要漏了显式调用 VueCompositionApi 68 | Vue.use(VueCompositionApi) 69 | 70 | new Vue({ 71 | render: h => h(App), 72 | }).$mount('#app') 73 | ``` 74 | 75 | 76 | ```bash 77 | npm install weui --save 78 | ``` 79 | 80 | 我们同样使用 `npm` 安装 `weui` 模块，然后在 `main.js` 中引入 `weui`的基础样式库，方便我们可以在全局使用微信基础样式构建项目页面。 81 | 82 | ```js 83 | // main.js 84 | import Vue from 'vue' 85 | import App from './App.vue' 86 | // 全局引入 `weui` 的基础样式库 87 | import 'weui' 88 | import VueCompositionApi from '@vue/composition-api' 89 | 90 | Vue.config.productionTip = false 91 | Vue.use(VueCompositionApi) 92 | 93 | new Vue({ 94 | render: h => h(App), 95 | }).$mount('#app') 96 | ``` 97 | 98 | 回到 `App.vue`，保留 `components` 属性值清空 `