3.进入项目目录 cd vuecli_demo
目录结构如下
4.npm run dev(或npm start) 开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开，并实时监视我们的代码更改，即时呈现给我们。
5.如果想要执行完npm run dev(或npm start) 后能自动打开网页，则需要进行如下设置：
三、Vue-cli项目结构讲解
由于版本实时更新和你选择安装的不同（这里列出的是模板为webpack的目录结构），所以你看到的有可能和下边的有所差别。
以下项目结构是vue-cli@2.9.3版本
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- logo.png // logo图片
| |-- utils.js // 构建工具相关
| |-- vue-loader.conf.js // vue-loader配置
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境配置
| |-- index.js // 项目主要配置(包括监听端口，打包路径等)
| |-- prod.env.js // 生产环境配置
|-- src // 源码目录
| |-- assets // 静态资源
| |-- components // vue公共组件
| |-- router // vue路由
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- .postcssrc.js // post-loader的插件配置文件
|-- index.html // 入口页面
|-- package.json // 项目基本信息
|-- package-lock.json // 锁定当前安装的包的依赖
|-- README.md // 项目说明1.build——[webpack配置]
build文件主要是webpack的配置，主要启动文件是webpack.dev.conf.js，当我们输入npm run dev首先启动的就是webpack.dev.conf.js，它会去检查node及npm版本，加载配置文件，启动服务。
2.config——[vue项目配置]
config文件主要是项目相关配置，我们常用的就是当端口冲突时配置监听端口，打包输出路径及命名等
3.node_modules——[依赖包]
