Vuejs SPA 项目实践(一):创建项目

首先,我们这个项目是一个应用 webpack,综合使用各个 vuejs 部件构建的大型项目实践,我们会用到如下的组件:

  • vue
  • vue-router
  • vue-vuex
  • vue-resource

创建项目:

参考:https://github.com/vuejs/vue-cli

npm install -g vue-cli
vue init webpack myproject-front

注意编码规范使用 AirBNB 的 ESLint 规则GitHub,但是其实大部分都是标准 ESLint,出了问题根据提示在 http://eslint.org/ 上面查找规则就可以,几次下来基本上可以熟悉。

我们不要启用 Standard 的 ESLint 规则:https://github.com/feross/standard,实践试过并不好用。

可以看看 Standard 的编码规范,跟常规习惯差别较大:https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style

安装依赖项

npm install
npm install vue-router --save-dev
npm install vue-resource --save-dev
npm install vue-spinner --save-dev
npm install vuex --save-dev

还有一些常用的依赖项也可以装上:

npm install dateformat --save-dev
npm install es6-deferred --save-dev
npm install font-awesome --save-dev
npm install less-loader --save-dev
npm install reset-css --save-dev

运行

npm run dev

后记(2016年10月)

最近 Vue 已经将主版本升级到了 2.0,因此 vue-cli/vue-router/vue-resource/vuex 这几个库也同时升级,与旧版本不兼容,因此以上的命令创建出来的是 Vue2 的项目,如果还是需要创建 vue1.x 的项目,需要这样处理:

vue init webpack#1.0
npm install vue-router@0 --save-dev
npm install vue-resource@0 --save-dev
npm install vue-spinner --save-dev
npm install vuex@1 --save-dev
系列下一篇:Webstorm IDE 的 es6 环境设置

【转载请附】愿以此功德,回向 >>

原文链接:https://www.huangwenchao.com.cn/2016/06/vuejs-practise-1.html【Vuejs SPA 项目实践(一):创建项目】

《Vuejs SPA 项目实践(一):创建项目》有1个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注