想法

经验

0. 选择困难症

前端三大框架, 各有优劣, 网上各种测评看了好久, 最终决定先拿vue下手
然后问题又来了, 用什么UI框架呢?

vux
element-ui
mint-ui
bootstrap-vue
......

最终选择了星星数最多的vux, 虽然这个框架是个人开发维护的, 也存在很多问题.

1. vue-cli3 与 vux 的融合

vux 官方暂时还没有适配vue-cli3
vue-cli3 可以用 vue-cli-plugin-vux 一键安装 vux UI框架, 不需要手动适配vue-loader

npm i vue-cli-plugin-vux
vue add vux

2. 初始化项目的注意事项

可以通过命令行输入vue ui打开图形化界面
也可以vue create `project-name`直接在命令行创建
两种方式的效果是一样的, 看你习惯用哪种

   Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 (*) Babel //转码器, 将ES6+转换成ES5以适配更多浏览器
 ( ) TypeScript //根据情况自选
 ( ) Progressive Web App (PWA) Support //根据情况自选
 (*) Router //前端路由, 选上
 (*) Vuex //全局状态管理, 选上
 (*) CSS Pre-processors //CSS预处理器, 选上
 ( ) Linter / Formatter //如果已经在编辑器里安装了ESLint, Prettier等插件的话就不用选, 会冲突
 ( ) Unit Testing //单元测试, 暂时没用上
 ( ) E2E Testing //暂时没用上

回车之后就进入了进一步的配置.
Use history mode for router?默认Y, 链接里就不会出现/#/
一路回车即可.

3. VSCode对Webpack Alias路径的支持('@/'), 只需在项目根目录中添加jsconfig.json文件, 内容如下:

//jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules"]
}

4. Vue.js + Node.js(koa2)集成开发

开发全栈项目, 登录组件拼凑完成以后, 前端开发告一段落, 是时候写一点后端接口了. 目前没有找到比修改proxy更优雅的解决方案.

另一种方法参考:
【新手向】Vue.js + Node.js(koa) 合体指南

点子

https://github.com/wangdahoo/vonic
http://ghbtns.com/#star
<iframe src="https://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>

Vue.js学习随笔