搭建vue项目之前你需要安装vue的脚手架和node.js，一起去看看怎么搭建一个vue环境吧。（学编程语言最爱看见的就是用这个先写一个helloworld，只想说我对世界友好可是现实是残酷的。。。。。。）
1& 安装node.js （安装网址点击下面链接）
node.js下载网址
安装完以后桌面上什么都没有是不是有点慌啊！不急，你先打开Dos窗口，输入以下命令，
如果界面如下：（恭喜你）
也有可能失败，失败的原因可能是系统权限，目前还没有找到最好的解决办法。。。。。
Node.js是个啥人家首页都写着呢，俺就不给你解释了哈。
2&安装vue的脚手架
全局安装vue-cil，也就是所谓的脚手架（不要觉得有什么高大尚的也就是如此而已）
1）用npm安装（国际开源库生态系统）
2）用cnpm安装（使用国内镜像安装）
你先用淘宝镜像安装cnpm才可以使用哦
1.npm install -g cnpm --registry=https://registry.npm.taobao.org
检查是否安装上（cnpm -v）
2. 用cnpm安装vue脚手架
cnpm install -g vue-cli
最后检查自己是否安装上：（vue -V）记住这里的-V是大写字母V，出不来可不要懒我，我可不会管你
特别注意：
1.如果提示“无法识别”，有可能是npm的版本过低。
解决办法：npm install -g npm（更新一下版本就好了）。
2. 如果安装失败的话。
解决办法：npm cache clean（清除一下缓存就好了）
3&生成项目
首先需要用cd指令进入项目目录进行搭建项目的文件夹
配置完成以后，可以看到目录下多出一个项目文件夹，里面就是vue-cli创建的一个局域webpack的vue.js项目。
然后进入项目目录下：cd mai
上面脚手架给我们把常用的插件都下载并且配置起来，比方说路由、以及es6转成es5的插件。
在做项目的过程我们常常用到数据的传输和各个组件的管理，所以接下来我们还需要安装一些插件：
安装vue-resource是用于ajax请求的vue插件 用来和服务器端进行数据通信
npm install vue-resource --save
安装vuex是用于管理每个组件之间的状态值的改变
npm install vuex --save
点击打开链接（vuex的介绍和使用）
记住以上两个必须安装在项目里哦，忘记了小姐姐可不会负责哦（没事，错了就重新来一遍呗）。
npm install（这样就完成了）
最后就是启动项目了（就问一句激不激动小伙伴们）
npm run dev
出现这个页面就算是大功告成了（在浏览器上输入localhost：8080就可以打开如下界面）
（可以开始写项目了。。。。。。）
特别注意：
如果浏览页面打不开或者是没有加载页面，有可能是本地8080端口被占用，又或者是你关闭了这个窗口。
解决办法：
针对第一种情况：修改配置文件就好了
打开项目找到config>index.js
建议将端口号改为不常用的端口（例如：8075 8081等等端口，一般情况默认的端口号是8080）。
对于第二种情况：重启一下JavaScript的运行环境就好了，至于怎么启动我就不说了。
4&打包上线
自己的项目文件都需要放到 src 文件夹下
项目开发完成之后，可以输入 npm run build 来进行打包工作
打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看，项目上线时，只需要将 dist 文件夹放到服务器就行了。
导入文件以后，其文件组织结构如下所示：
各个文件夹的含义如下：
|-- 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 // 项目基本信息
最后来一个撩人小技能（得跟有好感的男盆友玩才有意思）：
女：我们两个有几条腿？
男：4条腿
女：不对不对
男：？？
女：一条腿，他们都说我们有一腿
（如果你的男盆友不安套路出牌的话我也没有办法了）
原文链接：https://blog.csdn.net/ermaner666/article/details/78995234