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 端口查看。

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