Vue 项目尝鲜（一） 搭建项目

前言 vue 是现在很火的一个前端开发框架，它容易学上手快，基本已经成为一名前端工程师的标配了。但是我们如果一开始只是看官方文档的话，有时候会感觉有点虚，这个时候就要搞整个项目来抚慰一下自己，证明一下自己。这次我就手把手教大家做自己的 vue 前端项目啦。

注： 搭项目只是为了大家心里有个底，要想好好学 vue，还是得老老实实看文档。

配环境

建项目之前我们需要配好下面几个环境

1. Node & Npm

这个直接去 Node 官网 下载一个安装包，然后直接安装就行了。然后我们打开一下我们的控制台，输入下面的命令来判断我们环境是否搭好了。如果不想按照默认安装的话，可以看我之前的教程

// 查看 node 版本
node -v // v10.15.3 我这边是这个版本

// 查看 npm 版本（这个在装 node 的时候会一起装的）
npm -v // 6.4.1

由于网络问题，我们后面用 npm 安装依赖的时候，可能会很慢（现在就还好，不过还是装一下吧），所以我们可以使用淘宝的镜像，安装一个 cnpm，然后用它替代 npm 装依赖

npm install -g cnpm --registry=https://registry.npm.taobao.org

1. 全局 vue-cli 脚手架工具

这个就简单了，我们可以直接用 npm 来安装，直接在控制台输入下面指令全局安装脚手架工具

npm install -g @vue/cli

接着我们在控制台输入下面指令查看脚手架工具的版本顺便看看自己环境配成功没。

vue -V // 2.9.6

好了，到这里我们的环境就配好了。

搭建项目

环境配好之后，我们就可以搭建我们的 vue 项目了。我们到我们要创建项目的目录下，打开控制台输入下面的指令

vue init webpack vue-demo // vue-demo 是项目名，按照自己需求来写

它会下载模板，然后让我们进行选择配置我们的想，下面我们一条一条过控制台的指令哈

？Project name（vue-demo）

这个是确定项目名称的，你可以重新输入项目名，但是一般回车 yes 过就好了。来，下一个

? Project description(A Vue.js Project)

这个是用来描述项目的，也不用管了直接回车，next

? Author <XXXXX>

这个是确定项目作者的，回车回车，

? Vue build (Use arrow keys)
❯ Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specif
ic HTML) are ONLY allowed in .vue files - render functions are required else
where

这个看起来很多，是关于打包构建，但是我们还是直接回车选默认首个吧。

? Install vue-router? (Y/n)

要不要配个 vue-router 啊，要啦，回车 Yes

? Use ESLint to lint your code? (Y/n)

看到这个不要回车先，这个先说明一下 ESLint 是一个用来检测 JS 语法的插件，以后建议还是用它，但是第一次还是不要用了，不然你会发现你写啥它都报语法错误，所以这边，我们输入一个 n， 然后回车

? Set up unit tests (Y/n)

这里我们不需要单元测试，n，回车

? Setup e2e tests with Nightwatch? (Y/n)

我们也用不到端对端测试，n，回车

? Should we run `npm install` for you after the project has been created? (r
ecommended) (Use arrow keys)
❯ Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

最后啦，这个就是要问你咋安装依赖了，我们就先不安装依赖了，选到第三个，回车。

最后一对提示词出现，项目搭建成功。

运行项目

运行项目前，我们要安装项目依赖。我们进去项目文件夹，控制台输入

npm install

安装依赖，输入很慢的话，下次要装依赖的时候就用

cnpm install

依赖安装完成之后,我们可以执行

npm run dev

把项目跑起来了，这个可能需要几秒中，

 DONE  Compiled successfully in 8632ms                              10:09:12

 I  Your application is running here: http://localhost:8080

看到这个，我们就可以在浏览器打开 8080 端口查看。

看到上面的页面？好的，项目搭建成功。成功获取局部胜利。