vue知识掌握（一）

# vue项目的搭建

本文章主要讲述vue项目的搭建，在搭建vue项目前需要准备一些材料。

1.[node](https://nodejs.org/zh-cn/)安装

npm：在你安装node的时候一般node已经自带了npm，所以忽略。

webpack：npm install webpack -g

检验安装是否成功的办法：

检验node：`node -v`

检验npm：`npm -v`

检验webpack：`webpack -v`

2.安装vue-cli(vue脚手架)

`npm install --global vue-cli`

接下来就是正式的开始搭建项目了。

3.打开windows的命令行窗口

快捷方式：win+r然后输入cmd确认。

将路径切换到自己希望保存项目的路径。

然后输入：vue init <template-name> <project-name>

init是初始化项目，template-name是模版名，project-name是项目名（自定义）。

例如（vue init webpack thefive）

目前vue官方提供了六种初始化模版，分别是webpack、webpack-simple、browserify、browserify-simple、pwa、simple。其中最常用的是webpack模版。

 

这时候命令行会出现一系列提问需要你去确认。

? project name (thefive)

确认项目名

? project description (a vue.js project)

确认项目描述

? author (.................)

确认作者信息

? vue build (use arrow keys)
> runtime + compiler: recommended for most users
runtime-only: about 6kb lighter min+gzip, but templates (or any vue-specific html) are only allowed in .vue files - render functions are required elsewhere

选择打包方式

? install vue-router? (y/n)

是否安装vue-router

? use eslint to lint your code? no

是否使用eslint语法

? set up unit tests (y/n)

是否添加单元测试

? setup e2e tests with nightwatch? (y/n)

? should we run `npm install` for you after the project has been created? (recommended) (use arrow keys)
> yes, use npm
yes, use yarn
no, i will handle that myself

 选择启动方式

4. 初始化之后，再次将路径改到你的thefive里面

cd thefive

然后 

`npm run dev`

运行之后会得到一个本地地址：

http://localhost:8082

将地址复制到浏览器就可以看到效果了。