kenberkeley / vue-demo

Vue.js 示例项目 · 简易留言板。本项目拥有完善的文档说明与注释，让您快速上手 Vue.js 开发 SPA。Webpack / ES6 + Babel / Vue Router / (Vue Resource?) / (Vue Validator?) / (Vuex?) —— An Excellent Vue Starter with Best Practice / 最佳实践

Vue 示例项目 · 简易留言板

Vue2 脚手架已出！戳这里!

在线 Demo | 在线文档

vue-demo's Issues

本人新手，疑惑中……

作者写的如

`/**

• 新增留言信息
• @param {String} msgBody.title
• @param {String} msgBody.content
• @resolve {Object} msg
  */
  add (msgBody) {
  return xhr({
  method: 'post',
  url: '/msg',
  body: msgBody
  })
  }`
  意思是点击添加按钮的时候，调用后台的处理方法msg，是这意思吗？？

我想请问下webpack如何打包不同环境的配置?

比如我连接后台的rest API，sit和uat到上线都对应不同后台的ip地址。webpack应该怎样配置不同环境的变量呢？

package.json devDependencies 貌似少了两个包

1. path
2. cross-env

build 不成功，是何原因？

正在学习这个 demo 的代码架构，很棒！不过为啥我 npm build 后没一点反应呢? 控制台并没有输出任何 info，也没有 dist 目录生成。这个跟开不开 msg-board-api 这个项目没啥关系吧？

环境

• OS X 10.11.6
• node 6.3.0
• npm 3.10.3

webpack-dev-server 代理请求 api

很棒，想问下开发时常用接口代理去解决跨域问题，
'''
proxy: {
'/some/path*': {
target: 'https://other-server.example.com',
secure: false
}
}
'''
这儿是怎么处理的

启动后报错，登录不了

详细说下你这个项目怎么打开好吗

讲道理

我这边打开很是问题啊

终于摆脱了手动同步顶级变量与服务 data 的困扰

见 commit add14c2

感谢《 Vue.js 权威指南》

筛选功能

在线demo 中的筛选用户功能不起作用 @kenberkeley

关于Vue 组件中route 何时执行。

在demo中看到一段代码如下：

export default {
mixins: [updateQuery],
components: { Pagination, LimitSelect, AuthorSelect, OptBtnGroup },
data: () => ({ total: 0, msgs: [] }),
route: {
data () {
msgService
.fetchList(this.$route.query)
.then(({ total, rows }) => {
this.total = total
this.msgs = rows
})
}
},

请教下 route什么时候执行呢， 可以用生命周期的其他方法替换在route里给data重新赋值吗？

希望可以做 vue2 的版本

很棒的Demo
希望可以做 vue2 的版本

请问这个demo是基于vue1写的吗？在学习vue2的可以刷这个demo吗！

谢谢开源demo供学习！！

按照issue2启动后浏览器显示：Cannot GET /, console里面有error: Failed to load resource: the server responded with a status of 404 (Not Found)

Cannot GET /
Failed to load resource: the server responded with a status of 404 (Not Found)

你好，请问有Vue2.0版本？

browser-sync-webpack-plugin 不是可以自动生成ip地址的？

Vue2.0里好像已经不支持父子组件用$root通信了？

1.你的navbar父子组件用的$root通信。
2. 可是现在vue2.0的文档上找不到说可以用这$root通信了，不知道是不是不支持了？我用的2.0试你的代码不成功。
3. 而且1.0的版本上也是说不推荐这样；

`子组件可以用 this.$parent 访问它的父组件。根实例的后代可以用 this.$root 访问它。父组件有一个数组 this.$children，包含它所有的子元素。

尽管可以访问父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用 props 传递数据。另外，在子组件中修改父组件的状态是非常糟糕的做法，因为：

这让父组件与子组件紧密地耦合；

只看父组件，很难理解父组件的状态。因为它可能被任意子组件修改！理想情况下，只有组件自己能修改它的状态。`

Vue2 脚手架已出！！！

请看 https://github.com/kenberkeley/vue2-scaffold

想搭建这个demo的vue2.0要注意什么

Webpack CommonsChunkPlugin 配置 names: ['vendor', 'mainifest'] 的作用

刚才收到一份邮件：

其实很早以前我就发现，有时改动业务代码，重新 npm run build 编译出来的 vendor 版本号总是变化
详见 Webpack 的这个 issue

后来我百度到了 webpack打包第三方类库的正确姿势，貌似这就是最简单的 solution：

没错，就是上面这个配置，只是简单的加了 'manifest' 。
再次做我们前面的测试，你会发现多了一个manifest.js，但是vendor的hash值不再变化了。
点到为止，江湖再见。

最后，感谢 @kinsxkins 的反馈

通过您的demo学习到很多，这里有一个疑问想要请教您

所有的spa项目都有个特性 this.$root.userData = userService.data = userSessData 通过代码去保存一些states，用vuex也一样，那么问题来了如果用户在中途刷新页面…states是会丢失的，用户又得登录，您有什么经验和建议，或者说用户刷新浏览器不丢失states（sessionStorage）。

npm start 错误

ERROR in .//.npminstall/babel-loader/6.2.5/babel-loader!.//.npminstall/eslint-loader/1.5.0/eslint-loader!.//.npminstall/vue-loader/8.5.3/vue-loader/lib/selector.js?type=script&index=0!./src/components/App.vue
Module not found: Error: Cannot resolve 'file' or 'directory' /home/danny/mygit/vue-demo/src/components/Navbar in /home/danny/mygit/vue-demo/src/components
@ .//.npminstall/babel-loader/6.2.5/babel-loader!.//.npminstall/eslint-loader/1.5.0/eslint-loader!.//.npminstall/vue-loader/8.5.3/vue-loader/lib/selector.js?type=script&index=0!./src/components/App.vue 7:14-42

npm start Failed

0 info it worked if it ends with ok
1 verbose cli [ 'E:\nodejs\node.exe',
1 verbose cli 'E:\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]prestart: [email protected]
6 silly lifecycle [email protected]prestart: no script for prestart, continuing
7 info lifecycle [email protected]start: [email protected]
8 verbose lifecycle [email protected]start: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]start: PATH: E:\nodejs\node_modules\npm\bin\node-gyp-bin;E:\workspace\vue-demo-master\node_modules.bin;E:\nodejs;C:\ProgramData\Oracle\Java\javapath--;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;E:\nodejs;C:\Program Files\Java\jdk1.8.0_92\bin;C:\Program Files\Java\jdk1.8.0_92\jre\bin;C:\Users\Administrator\AppData\Roaming\npm;%USERPROFILE%\AppData\Local\Microsoft\WindowsApps;
10 verbose lifecycle [email protected]start: CWD: E:\workspace\vue-demo-master
11 silly lifecycle [email protected]start: Args: [ '/d /s /c',
11 silly lifecycle 'cross-env NODE_ENV=development node build/dev.js' ]
12 silly lifecycle [email protected]start: Returned: code: 1 signal: null
13 info lifecycle [email protected]~start: Failed to exec start script
14 verbose stack Error: [email protected] start: cross-env NODE_ENV=development node build/dev.js
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (E:\nodejs\node_modules\npm\lib\utils\lifecycle.js:239:16)
14 verbose stack at emitTwo (events.js:100:13)
14 verbose stack at EventEmitter.emit (events.js:185:7)
14 verbose stack at ChildProcess. (E:\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
14 verbose stack at emitTwo (events.js:100:13)
14 verbose stack at ChildProcess.emit (events.js:185:7)
14 verbose stack at maybeClose (internal/child_process.js:850:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
15 verbose pkgid [email protected]
16 verbose cwd E:\workspace\vue-demo-master
17 error Windows_NT 10.0.14393
18 error argv "E:\nodejs\node.exe" "E:\nodejs\node_modules\npm\bin\npm-cli.js" "start"
19 error node v5.9.0
20 error npm v3.7.3
21 error code ELIFECYCLE
22 error [email protected] start: cross-env NODE_ENV=development node build/dev.js
22 error Exit status 1
23 error Failed at the [email protected] start script 'cross-env NODE_ENV=development node build/dev.js'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the vue-demo package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error cross-env NODE_ENV=development node build/dev.js
23 error You can get information on how to open an issue for this project with:
23 error npm bugs vue-demo
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls vue-demo
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

目录结构暂放

.
├── build/               # Webpack 配置目录
	├── config/            # 放置需要经由 Webpack 处理的静态文件（ASSET）
		├── PATHS.js                 # PATHS 便捷求取路径原型函数
		├── PORTS.js                 # 端口配置
	├── dev.js                   # npm run start
	├── prod.js                  # npm run build
	├── gulpfile.js              # d
	├── webpack.base.conf.js     # d
	├── webpack.dev.conf.js      # d
	└── webpack.prod.conf.js     # d
├── dist/                # build 生成的生产环境下的项目
├── src/                 # 源码目录（开发都在这里进行）
	├── assets/            # 放置需要经由 Webpack 处理的静态文件（ASSET）
		├── css/            		 # css 文件夹
		├── img/            		 # img 文件夹
		├── less/            		 # less 文件夹
		└── scss/            		 # scss 文件夹
	├── components/        # 组件（COMPONENT）
		├── App.vue                  # 根组件
		├── Breadcrumb.vue           # 面包屑
		├── Navbar.vue               # 顶部导航栏
		├── Pagination.vue           # 分页
		├── Select/                  # 下拉框选择框组件
			├── LimitSelect.vue            # “每页显示多少条记录” 下拉选择框
			└── Select2.vue                # 对 Select2 的封装
		├── Sidebar/                 # 侧边栏组件
			├── index.vue                  # 侧边栏
			└── Link.vue                   # 导航链接封装
	├── filters/           # 过滤器（FILTER）
	├── mixins/            # （MIXIN）
	├── routes/            # 路由（ROUTE）
	├── services/          # 服务（SERVICE，统一管理 XHR 请求）
	├── utils/             # 工具类（UTIL）
	├── views/             # 路由页面组件（VIEW）
		├── index.vue                # 首页
		├── auth/                    # 用户认证模块
			├── login.vue                  # 登录页
			└── logout.vue                 # 注销登录页
		└── msg/                     # 留言板模块
			├── index.vue                  # 对应 /msg（留言板首页，alias => /msg/list）
			├── list.vue                   # 对应 /msg/list（留言板列表）
			├── add.vue                    # 对应 /msg/add（新增留言）
			├── detail.vue                 # 对应 /msg/detail/:msgId（查看留言）
			├── update.vue                 # 对应 /msg/update/:msgId（修改留言）
			├── _components/               # 留言板模块共用组件
			│   ├── AuthorSelect.vue             # 留言发布者选择下拉框
			│   ├── MsgForm.vue                  # 留言表单
			│   └── OptBtnGroup.vue              # 留言操作按钮组
			└── _mixins/                   # 留言板模块共用 mixins
				└── autoLoadByParams.js          # 根据 $route.params.msgId 自动加载
	├── app.js             # 启动文件
	└── index.html         # 静态基页
├── static/              # 放置无需经由 Webpack 处理的静态文件
├── .babelrc             # Babel 转码配置
├── .eslintignore        # （配置）ESLint 检查中需忽略的文件（夹）
├── .eslintrc            # ESLint 配置
├── .gitignore           # （配置）需被 Git 忽略的文件（夹）
└── package.json         # 

关于插入组件的问题

你好，Ken！
很感谢您的vue-demo项目，给了我很大启发！
最近我想在此项目中，插入monaco editor组件，但是均以失败告终！好像是monaco editor对webpack的版本要求在4.5.0，请问有什么办法来解决这种问题吗？

请问这个demo有视频吗

基于此项目qq技术讨论群287376123

这个项目做中小型的前端项目架构很不错，我建了一个群，专门针对这个项目的，大家一起加入，一起成长，进步更快一点~

webpack打包assets内容

正在学习这个demo,但是src/assets 的运用不是特别清楚
如果能更新一些webpack打包的资源运用就完美了

browser-sync-webpack-plugin 配置

修改

new BrowserSyncPlugin({
    host: 'localhost',
    port: PORTS.BROWSER_SYNC,
    proxy: 'localhost:' + PORTS.DEV_SERVER,
    notify: false
  }, {
    reload: false
  })

效果

luuman@luuman-PC MINGW64 /d/Vue/Github/vue-demo-master
$ npm start

> [email protected] start D:\Vue\Github\vue-demo-master
> cross-env NODE_ENV=development node build/dev.js

[HPM] Proxy created: /  ->  http://127.0.0.1:9989
[HPM] Proxy rewrite rule created: "^/api" ~> "/"

▄    ▄▄▄▄    ▄▄▄▄    ▄▄▄▄    ▄▄▄▄    ▄▄▄▄    ▄▄▄▄  ,--------,      ,------.
▄░░░░▄▄▄▄░░░░▄▄▄▄░░░░▄▄▄▄░░░░▄▄▄▄░░░░▄▄▄▄░░░░▄▄▄▄░ │▗▝ ▞ ▝ ˄---˄  / Nyan! |
▄░░░░▄▄▄▄░░░░▄▄▄▄░░░░▄▄▄▄░░░░▄▄▄▄░░░░▄▄▄▄░░░░▄▄▄▄░~│ ▞  ▞ ❬.◕‿‿◕.❭--------’
▄░░░░▄▄▄▄░░░░▄▄▄▄░░░░▄▄▄▄░░░░▄▄▄▄░░░░▄▄▄▄░░░░▄▄▄▄░ `w-w---- w w
▄░░░░▄▄▄▄░░░░▄▄▄▄░░░░▄▄▄▄░░░░▄▄▄▄░░░░▄▄▄▄░░░░▄▄▄▄░
 (build time: 7.037s)
webpack built 1eac338fc25fd9ca2310 in 7041ms
[BS] Proxying: http://localhost:9000
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:9080
    External: http://172.16.21.48:9080
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://172.16.21.48:3001
 -------------------------------------
[Logger] GET /auth/checkLogin
[Logger] GET /auth/checkLogin
[Logger] GET /auth/checkLogin

自动生成对应的IP地址：

有没有升级vue2.0计划？

所有环境安装好，但是不能正确的 build