Vue.js系列项目建设(一)

描述：

我们的项目现在使用：vue 2.0 vue-CLI web pack vue-router 2.0 vue-resource 1 . 0 . 3

如果实践与本文内容有较大差异，我们来看看是不是版本问题。

本文为系列文章，待我对Vue有了更深入的了解后会及时修改或更正。欢迎大家批评指出错误。

今天我们要讲的是Vue2.0，最近公司的App3.0用Vue2.0建成了web版，因为是第一次用vue，刚用的时候2.0出来还不到一个月，很多坑都是自己踩的。现在项目上线了，记录一些流程。(这是主页的当前渲染图)

项目建设的具体步骤如下：

1.安装节点

去官网下载安装。我这里有win7系统。

(中)https://nodejs.org/zh-cn/

(英国)https://nodejs.org/en/

2.安装cnpm映像

(节点已安装npm，因此不再安装)

$ npminstall-gcnpm-registry=https://registry.npm.taobao.org如何安装该模块

$ cnpm安装[名称]3。快速学习Vue2.0教程

(中)http://cn.vuejs.org/

(英国)https://vuejs.org/

如果你觉得这些网站访问速度慢，可以转到国内开发者自己翻译的网站：https://vuefe.cn/

4.安装Vue2.0

$ cnpm安装vue5。安装vue-cli脚手架工具

$ cnpminstall-globalvue-cli6。在某个目录中创建一个基于webpack模板的新项目

$ vueinit web pack my-project//my-project是您的项目名称7。安装依赖关系

$ cd my-project //到项目目录$ cnpm install //安装依赖项8。运行新创建的vue项目。

在运行$ npm run dev之后，您将看到vue的初始页面效果，如下图所示，这表明您已经成功构建了一个vue项目。(下面的方框是官方插件，很牛逼，很实用)

注意事项：

1.安装Git(可选)

如果你熟悉或者想了解Git，可以在安装node之前先安装Git，用Git Bash代替windows的cmd命令面板。如果使用windows的cmd命令行工具，则省略上述安装命令前的“$”。

Git官方网站：https://git-scm.com/

Git国内教程推荐：http://t.cn/zQ6LFwE

2.不要应用ESLint

在创建webpack模板项目时，如果您不熟悉ES6和ESLint，我个人不建议您应用它。因为要求严格，你不小心报错了，导致整个项目无法运行，对于初学者来说非常痛苦。

摘要

今天主要分享了如何从头开始创建vue项目。接下来，我将通过我自己的实际项目操作过程来分享我们是如何完成的。