第一个vue项目构建

1、安装node环境，去node官网上下载，如果需使用git，window系统建议下载一个git.exe,使用gitbash;

2、安装npm，建议安装cnpm淘宝镜像 npm install -g cnpm -registry=https://registry.npm.taobao.org

cnpm -v查看版本

3、安装vue脚手架 cnpm install -g vue-cli

4、配置vue环境变量（目的是为了在计算机的其他目录下也可以使用vue命令，初始化vue项目）

vue -V可以查看是否安装及配置成功

步骤：

计算机右键——属性——高级设置——最下面环境变量——在path路径后面拼接vue.cmd的路径

注：在安装脚手架的过程中会提示vue.cmd的安装目录，也可以脚手架安装成功后全局搜索vue.cmd,复制路径拼接到path项后面即可，记得以分号间隔

5、 vue init webpack myweb （初始化一个vue项目，myweb是我起的项目名,项目名不能使用大写英文字母）

Project name:——项目名称

Project description:——项目描述

Author:——作者

Vue build:——构建模式，一般默认选择第一种

Install vue-router?:——是否安装引入vue-router，这里选是，vue-router是路由组件,后面构建项目会用到

Use ESLint to lint your code?:——这里强烈建议选no 否则你会非常痛苦，eslint的格式验证非常严格，多一个空格少一个空格都会报错，所以对于新手来说，一般不建议开启，会加大开发难度

Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试，可以不用安装

6、安装依赖cnpm,下载到该vue项目中，用cnpm  run dev来启动项目

7、默认是8080端口，如果端口被占用会报错，可以在config文件夹下的index.js中更改端口，我用的是8000端口

8、启动项目初始页面cnpm run dev，可能会出现不自动打开浏览器运行项目，如下

此处告知了项目的运行地址，在地址栏输入地址即可查看项目，将autoOpenBrowser: false,改为true即可自动打开浏览器运行项目，如图

注：建议关闭命令窗口重新运行，因为配置文件更改了，否则可能不起作用

9、最终效果