/ vue

vue

为什么要选 Vue?

jQuery 和 React 不可以么?

现在前端搭着 Node.js 的顺风车已经快速发展了好几年,用户需要更好的交互,更炫的视觉效果。jQuery 的定位是实用,更适合后台管理系统使用。

Vue 因为项目主导人母语是汉语,为了项目更容易的找到开发人员,使用 Vue 无疑比 React 更明智,毕竟英文文档的阅读能力是个门槛。

必须满足的要求——服务端渲染

使用 Vue 必须要确保服务端渲染是可行的,毕竟 SEO 不能完全抛弃。百度爬虫对 JavaScript 迟迟不予支持,看看对待 https 的态度就不多做期待了。

官方提供服务端渲染的支持:https://ssr.vuejs.org/zh/
直接使用 Nuxt.js:https://zh.nuxtjs.org/guide

npm install -g vue-cli

初始化项目:

vue init nuxt-community/starter-template app-nuxt
cd app-nuxt
npm install
npm run dev

这里遇到个问题,我本地使用的 nvm 安装的 node.js 默认版本为 6,而 nuxt 的兼容版本为 8,因此系统默认的 Node.js 需要切换为:

➜  app-nuxt nvm ls
         v4.9.1
->      v6.14.3
        v8.11.3
default -> lts/boron (-> v6.14.3)
node -> stable (-> v8.11.3) (default)
stable -> 8.11 (-> v8.11.3) (default)
iojs -> N/A (default)
lts/* -> lts/carbon (-> v8.11.3)
lts/argon -> v4.9.1
lts/boron -> v6.14.3
lts/carbon -> v8.11.3
➜  app-nuxt nvm alias default lts/carbon

切换后,退出 iTerm2 后,重新开启后执行命令。

应用会运行在 http://localhost:3000

注意:Nuxt.js 会监听 pages 目录中的文件变更并自动重启, 当添加新页面时没有必要手工重启应用。

Vue 的开发环境

编辑器使用不仅好用还免费的 VisualStudio Code https://code.visualstudio.com/ ,打开 *.vue 文件会自动提示安装相应扩展。

Chrome 安装 vue-devtools https://github.com/vuejs/vue-devtools#vue-devtools