vue---vue-cli2.x脚手架开发环境搭建

vue-cli脚手架介绍：

（1）脚手架是通过webpack搭建的开发环境

（2）使用es6语法

（3）打包和压缩js为一个文件

（4）项目文件在环境中编译，而不是浏览器

（5）实现页面自动刷新

实战步骤如下：

1. 安装node,---参考https://www.cnblogs.com/zhouyu2017/p/6485265.html

2.安装全局vue-cli命令：【npm i vue-cli -g】           查看当前版本【vue --version】

在命令行输入【npm i vue-cli -g】 回车，安装全局vue-cli脚手架；在命令行输入【vue --version】，验证vue-cli是否安装成功，安装成功会输出安装的版本信息；

 3. 创建一个基于webpack模板的新项目【vue init webpack helloworld】

在命令行输入【vue init webpack helloworld】，创建名为helloworld的项目，接下来配置参照下图：

创建完成的项目目录如下图：

项目根目录下的index.html为首页入口文件，src目录下的main.js为项目的核心文件，用来实例化Vue对象，在该文件中进行路由的引入和配置，App.vue为项目入口文件。以上三个文件的执行顺序为：index.html--->main.js--->App.vue

各个目录/文件说明如下：

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等，index.js中修改port配置端口号
node_modules	npm 加载的项目依赖模块，包括各种loader等
src	要开发的目录 assets: 放置静态页面中的图片或其他静态资源，如logo等 components: 存放组件文件，如HelloWorld.vue为当前的一个组件 App.vue: 项目入口文件 main.js: 项目的核心文件，实例化vue对象
static	静态资源目录
index.html	首页入口文件
package.json	项目配置文件，JSON类型的数据文件，包括版本号、作者信息、依赖项等
README.md	项目的说明文档，markdown 格式

4. 创建完成后，按照命令窗的提示

进入hellworld目录【cd helloworld 】           运行项目【npm run dev】

回车后等待一会，直到出现以下“Your application is running here: http://localhost:8080”

5. 打开浏览器，输入 http://localhost:8080，到此vue开发环境搭建完毕，helloWorld.vue组件渲染的页面如下：