手把手教你搭建一个vue项目

vue可以说是现在比较火的一个前端框架，下面笔者就分享一下经验，教大家怎么快速去搭建一个vue项目。

  搭建vue项目有两种方法，一种是通过script标签快速引入，这种方式适用于初学者，直接下载vue.js文件引入即可。但是不利于开发。因为vue项目中要包括vue-router、component等等元素，通过script标签引入，后期就需要人为手动地创建，不利于维护。为了统一规范，因此就出现了vue-cli脚手架这些东西。另外一种方法就是通过vue-cli脚手架去快速搭建一个vue项目，这样搭建的vue项目已经包含了初始化好的vue-router、component等元素，结构更加的清晰。但是这种开发方式不推荐初学者使用，一是环境的配置相对麻烦，二是需要开发者对vue项目的架构有一个清晰的认识。

  第一种方法：通过script标签引入（推荐初学者使用）
  进入vue.js官网，我们发现可以使用cdn的方式引入或者下载vue.js文件本地引入。个人还是推荐本地引入吧，cdn虽然有加速，但是当项目文件比较多的时候，速度上还是比不上本地引入的。


  第二种方法：通过vue-cli脚手架搭建（利于开发和维护）
  第一步，安装node。进入node.js官网，选择windows版本下载。个人推荐使用.msi文件。运行.msi文件，一路确定安装即可。完成安装后，打开cmd，输入node -v指令，显示node版本即是安装成功。


  第二步，安装webpack。因为上面我们已经配置了node环境，下面就可以使用npm指令了。npm指令可以说是vue项目中经常用到的东西，它通常用来安装依赖、插件等等。我们打开cmd，输入npm install -g webpack这条指令，待安装完成后，使用webpack -v指令查看webpack版本号，显示版本号即安装成功。

  第三步，安装vue-cli脚手架。打开cmd控制台，输入npm install -g @vue/cli指令，待安装完成后，输入vue --version指令查看版本号，显示版本号即安装成功。

  第四步，创建一个vue项目。可以选择通过vue指令在命令行中创建，也可以通过图形化界面创建。个人还是比较喜欢图形化界面的创建方式，因此下面介绍的也是这种方式。打开cmd，输入vue ui指令。待指令完成后，会自动打开一个网页。如下图。

  点击创建，选择创建项目的位置
  输入项目名称后，点击下一步

  选择手动配置项目

  勾选Babel、Router、Linter和使用配置文件这几项，对于一般的开发是足够了。然后点击下一步


  选择标准模式，然后点击创建项目

  创建可能会有点慢，因为要去官网下载依赖包。

  项目创建好是这个样子的

  点击任务，选择运行，无报错后点击启动app。

  出现下面的界面说明一个vue项目已经成功创建了