前提说明
在开始之前，我认为您是了解Vue的（不精通没关系），对基础的前端技术（Javas、HTML、CSS等）是有一定基础的，我不建议一开始学前端技术就从框架开始，从最基础的开始吧，毕竟磨刀不误砍柴工嘛。
搭建之前的环境要求
- Node环境 Cmd中敲 node -v 可以看到版本
-
npm环境（或者yarn，建议用npm）npm -v 可以看到版本
我电脑上的截图如下：
environment.png
搭建过程
1.安装Vue CLI，打开cmd窗口或者任何一个命令行窗口，运行如下命令
npm install -g @vue/cli
cnpm install -g @vue/cli //国内
npm由于国内的网络原因，一般会等待时间太长报错，最好用淘宝镜像cnpm来运行命令，如果没有安装cnpm，运行如下命令即可安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.检验安装是否正确：安装之后输入 vue -V (注意这里是-V是大写) 会显示版本，否则安装失败。
QQ截图20181101104024.png
失败的原因多半是由于node环境不合适引起的，网上找找解决办法，这里就没办法陈列所有情况了。
3.在实际开发中，一般我们都会使用webpack这个模板，那我们这里也安装这个模板，在命令行输入以下命令：
vue init webpack vvv
输入命令后，会询问我们几个简单的选项，我们根据自己的需要进行填写就可以了。
QQ截图20181101101350.png
Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写
Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
Author：作者，如果你有配置git的作者，他会读取。
Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择y
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，如果你是大型团队开发，最好是进行配
setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n
4.安装npm包：进入到项目的第一级目录( cd vvv)，打开cmd窗口，输入
cnpm install
QQ截图20181101092353.png
5.启动项目：
npm run dev
QQ截图20181101092714.png
浏览器输入服务地址（http://localhost:8080/#/），然后就可以看到本地跑起来的Vue。
如果想让网页在浏览器自动打开，则需要进行如下设置：
QQ截图20181101101759.png
到这里了，第一个Vue CLI2构建的vue程序就成功了，接下来就可以修改框架配置和结构，开始真正的vue组件化开发了，利用webpack可以解决很多问题，例如用命令行调试、打包等。
文件结构
在编辑器中打开该项目文件，其结构如下：
QQ截图20181101093944.png
|-- 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 // 项目说明
网友评论