从零开始搭建vue项目

为了更好地适应前端生态的急速发展，去年就已经开始接触了解过vue，但没有进行系统的使用，现在利用周末的时间充充电，记录一下我是怎么一步步把vue的项目搭建起来的。

vue可以使用传统的脚本引入和npm的方式安装使用，脚本直接引入比较简单，直接把 cdn上的资源引入项目就可以使用：

<script src="https://vuejs.org/js/vue.min.js"></script>

为了后期更好地管理项目，这里使用 npm 来安装管理模块。

下载安装 node.js

点此打开nodejs官网：https://nodejs.org/en/
下载LTS版本进行安装，安装完毕后 npm就已经一起装好了。
win + r 打开运行，输入cmd打开命令行，键入命令：
$ node -v 回车，如果正确显示了版本号说明安装Nodejs成功。
命令行再次键入命令：
$ npm -v 回车，如果正确显示了版本号说明 Npm安装成功。

ok，至此前期必须的软件安装完毕，下面进入真正的vuejs的安装使用。

安装vuejs

设定我们的项目都在D盘下的 vue目录中开发，则建立以下目录结构：
| - d:
| - vue
打开命令行，进入目录：
$ cd d:/vue 回车
键入以下命令：
$ npm install vue 回车，即进入vue的安装

以上只是介绍这种安装方法，这次的项目将不采用这种方法安装。

使用命令行工具 cli 进行安装 vuejs

打开命令行，依次输入以下命令

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

$ npm install --global vue-cli 是把vue-cli 进行全局安装，安装完成可以在任何目录下执行它所提供的命令，等待其安装完成后，键入：
$ vue init webpack my-project 这表示使用 vue-cli 提供的 vue命令，init是初始化一个项目，webpack参数是指明项目用到的打包构建方法，my-project是我们的项目名称（可随意更改），这时在我们的目录中生成了一个 my-project文件夹，键入：
$ cd my-project 进入到 my-project目录中；键入
$ npm install 这里是让npm根据文件夹里的 package.json中声明的依赖模块进行安装，安装完成会在目录中生成一个 node_modules文件夹，里面存放的都是项目依赖的包文件；键入
$ npm run dev 这是启动执行vue的开发编译命令，执行后即可在浏览器中输入地址进行 vue项目的访问：如
http://localhost:8080/#/

至此，一个可运行的 vue项目就搭建完成了。

CreateDate:2017-09-23 11:32:00
CreateBy: 华仔