vue零基础学习--搭建项目
一、script引入（联系使用，小型项目）
直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
二、Vue 提供一个官方命令行工具
vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。
1.cli是建立在node的环境下，首先检查是否安装node，可以直接到中文官网http://nodejs.cn/下载安装包。安装完之后检查安装的是否成功，输入命令行检查、
显示了安装版本号，则表示安装成功，注意版本号不要过低。
2.直接全局安装 vue-cli：命令行
npm install --g vue-cli
但是这种安装方式比较慢，推荐使用国内镜像来安装，所以我们先设置 cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果安装失败，可以使用 npm cache clean 清理缓存，然后再重新安装。后面的安装过程中，如有安装失败的情况，也需要先清理缓存
同样可以使用 cnpm -v 查看是否安装成功
然后使用 cnpm 安装 vue-cli 和 webpack
cnpm install -g vue-cli
最新的 vue 项目模板中，都带有 webpack 插件，所以这里可以不安装 webpack
安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。
如果提示“无法识别 'vue' ” ，有可能是 npm 版本过低，可以使用 npm install -g npm 来更新版本
3.搭建我们自己的项目
首先到我们需要建项目的文件夹 ，摁住shift键点击鼠标右键，选择在此处打开命令窗口，创建一个基于 webpack 模板的新项目
vue init webpack test-Project
安装结束后，根据提示启动项目，以前安装完后会在安装依赖，现在是在安装的时候就将依赖下载了，不需要单独安装。
成功后的文件结构为：
.
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // 项目基本信息
.
config里面有很多配置文件，我们可以根据项目改动，如更改访问端口号config>index.js
自己项目代码放在src里面里面。
4.项目完成之后，打包上线
npm run build
打包完成后，会生成 dist 文件夹
项目上线时，只需要将 dist 文件夹放到服务器就行了。