vue入坑全记录（1）----vue-cli脚手架搭建

一、环境搭建
1.安装node.js，安装完成后打开命令行工具（win+r输入cmd,）输入 node -v，如下图，如果出现相应的版本号，则说明安装成功，npm版本至少在3.x.x以上。

2,安装webpack，打开命令行工具输入：npm install webpack -g。安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。

3,安装vue-cli脚手架构建工具，打开命令行工具输入：npm install vue-cli -g，安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。

---

二、使用vue-cli构建项目

1. 创建一个总文件夹放项目。如果已经安装了git，在刚建文件夹下右键选择Git Bash Here直接打开；或者在命令行工具中使用“cd 目录名称”找到该文件夹。

2. vue脚手架搭建。输入：vue init webpack project；（“project” 项目名称，不能使用中文）。

     $ vue init webpack project  --------------------- 安装vue脚手架的命令
     ? Project name (project)    ---------------------项目名称
     ? Project name project
     ? Project description (a Vue.js project)  ---------------------项目描述
     ? Project description a Vue.js project
     ? Author Wjessie   --------------------- 项目创建者
     ? Author Wjessie   
     ? Vue build (Use arrow keys)
     ? Vue build standalone
     ? Install vue-router? (Y/n)  --------------------- 是否安装Vue路由
     ? Install vue-router? no
     ? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则
     ? Use ESLint to lint your code? No
     ? Setup unit tests with Karma + Mocha? (Y/n)
     ? Setup unit tests with Karma + Mocha? Yes
     ? Setup e2e tests with Nightwatch? (Y/n)
     ? Setup e2e tests with Nightwatch? Yes
     vue-cli · Generated "exprice".
    To get started:  --------------------- 说明如何启动这个服务
     cd exprice
     npm install
     npm run dev

如下图：

3. 进入创建的项目目录：cd project（项目名称）；
   项目目录如下：

4. 安装项目依赖：npm install；会有点慢，耐心等候哦！安装完目录会多一个node_modules文件夹。

   
   

简单介绍各个文件：

6. 启动项目，输入：npm run dev。服务启动成功后在浏览器中输入：localhost：8080会出现一个欢迎页面， 默认8080端口，确认自己的8080端口未被使用。

   

至此，vue脚手架搭建完成。