安装Vue之前，需要安装npm，npm类似iOS的cocopods, 而npm在node里面，所以直接安装node，就相当于安装了npm。
一：vue安装步骤：
安装VUE教程，我另一篇文章，有介绍npm是什么？如何安装Node.js和npm？
这里做简要介绍。
1，Node.js安装
安装好noedeJS然后继续安装下一步
2、全局安装vue-cli，执行npm install --global vue-cli，这个过程很慢。如果报错，多运行几次。
npm install --global vue-cli
因为默认是从国外服务器下，可以使用阿里巴巴在国内的镜像服务器。为了提高我们的效率，可以使用淘宝的镜像。
产生通过config命令设置默认下载路径：
npm config set registry https://registry.npm.taobao.org
即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。也就是：npm = cnpm。
然后再执行：
npm install --global vue-cli
3、安装后，检查是否安装成功
vue -V (在此注意V为大写)
二：创建新项目
1、使用vue建一个项目名叫xxxx（vue init webpack xxxx），注意项目名不能有大写。
注：vue-cli 的模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，他的配置并不全放在根目录下的 webpack.config.js中。
image.png
- 1，Project name 工程项目名称
- 2，Project description 工程项目描述
- 3，Author 作者名称
2 、注意：
项目建立过程中，有如下选择，选择NO。
(该选项为使用ESLint规范你的代码，一个空格错误都将报错，不开启，避免不必要的麻烦)。
后两项为单元测试，可以选择No.
image.png
3、项目建立完成后，目录结构如下：
image.png
4、进入项目目录文件夹（xYVuProject）中，就可以使用vue进行开发啦
5、使用npm run dev，便可以打开本地服务器实时查看效果（http://localhost:8080）
①：如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config>index.js
image.png
建议将端口号改为不常用的端口。如修改端口号8080改为：8081。如下图。
另外我还将 build的路径前缀修改为 ./（原本为/），是因为打包之后，外部引入 js 和 css 文件时，如果路径以 / 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。
如果上述①没法做到，那么就不管上面的①，直接进行②进行修改。
②：如图中修改端口号8080改为：8081
image.png
然后，按F5运行项目，项目运行起来去网页上修改端口号8080改为：8081，即可。
image.png
6、初始效果
image.png
三：项目结构：
Vue项目开发的目录结构保持一致，容易理解并方便构建与管理，方便日后的维护和其他同事的阅读。
在初入前端的时候，一个项目中的文件夹会非常多，与Vue官网的简单demo相差非常大，实际开发中会增加很多文件。
1，Vue目录结构
image.png
image.png
2，主要项目目录介绍
①.build目录是webpack主要的配置目录
image.png
其中比较重要是 webpack.base.conf.js
兼容ES6配置
image.png
配置地址常量
image.png
配置自定义loader
image.png
②.config目录是对webpack和node最基础的配置，定义了当前所属环境，监听的端口号，生成静态文件目录位置等
image.png
其中比较重要是index.js
配置node监听端口、静态文件位置，静态文件引用前缀、node代理等
image.png
③js目录是项目开发过程中的自行开发或引用的小型js库
image.png
其中比较重要的是http.js，封装了axios库的常见用法，可以配置统一的request拦截器和response拦截器，其他的有类似日期类库，echarts封装类，vue的mixin库等
4，stylus目录是css预处理语言目录
image.png
主要的样式文件
base --- 基础组件样式
mixin --- 混合函数库
reset --- 重置样式库
variable --- 全局变量声明
5，其他components、router、store目录
这三个目录结构是vue项目开发过程中独有的，分别代表vue组件目录，vue-router配置目录、以及vuex配置目录。
具体规范见
vue组件开发规范
vue-router配置规范
vuex配置规范
6，vue文件结构
image.png
