1. 搭建Vagrant的Vue环境
1.1 安装 Vagrant 环境
Vagrant 的安装方法这里就不在详细讲解了，网上有很多自行参考。
1.2 下载 Vagrant box 并 初始化Vagrant 环境
首先推荐一下一个网站：http://www.vagrantbox.es 。在这里有很多的 box 大家需要自行下载。
按照以下命令，安装box 1. # vagrant box add ubuntu https://github.com/jose-lpa/packer-ubuntu_lts/releases/download/v3.1/ubuntu-16.04.box 2. # mkdir ~/Desktop/vue && mkdir ~/Desktop/data && cd ~/Desktop/vue 3. # vagrant init ubuntu （此时你能看到当前目录下生成了一个 Vagrantfile 文件） 4. 用以下的Vagrantfile 文件内容替换当前的Vagrantfile 文件 5. # vagrant up (国内网络环境不太好，可能比较慢) 6. # vagrant ssh (进入vagrant 内)Vagrantfile 文件
Vagrant.configure("2") do |config| config.vm.box = "ubuntu" config.vm.box_check_update = false config.vm.network "forwarded_port", guest: 8080, host: 8080, host_ip: "127.0.0.1" config.vm.network "forwarded_port", guest: 3000, host: 3000, host_ip: "127.0.0.1" config.ssh.insert_key = false config.vm.synced_folder "./data", "/home/vagrant/vagrant_data" config.vm.provision "shell", inline: <<-SHELL apt-get update apt-get install wget curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash - sudo apt-get install nodejs sudo npm install -g npm sudo npm config set registry https://registry.npm.taobao.org sudo npm install vue sudo npm install --global vue-cli sudo npm config set registry https://registry.npm.taobao.org SHELL endvagrant 的一些常用命令
（1）vagrant init # 初始化
（2）vagrant up # 启动虚拟机
（3）vagrant halt # 关闭虚拟机
（4）vagrant reload # 重启虚拟机
（5）vagrant ssh # SSH 至虚拟机
（6）vagrant status # 查看虚拟机运行状态
（7）vagrant destroy # 销毁当前虚拟机
1.3 校验vagrant的vue环境是否安装成功
如果显示如下信息则成功。
vagrant@ubuntu:~$ nodejs -v v6.11.3 vagrant@ubuntu:~$ npm -v 5.4.1 vagrant@ubuntu:~$ vue -V 2.8.2 vagrant@ubuntu:~$
1.4 工作目录的简单介绍
经过以上步骤，其实大家可能已经发现了在宿主机的vue文件夹下有一个data 文件夹，在vagrant内部的 /home/vagrant/ 目录下有 vagrant_data 文件夹。这两个文件夹是数据互通的。我们后续的开发工作便在这两个文件夹中。
2. 初始化Vue项目环境
这一部分的内容和Vue官网介绍的内容相同。仅仅总结一下
2.1 创建Vue 项目
vagrant@ubuntu:~/vagrant_data$ npm config set registry https://registry.npm.taobao.org vagrant@ubuntu:~/vagrant_data$ npm config get registry https://registry.npm.taobao.org/ vagrant@ubuntu:~/vagrant_data$ vue init webpack vue-project ? Project name vue-project ? Project description A Vue.js project ? Author ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Setup unit tests with Karma + Mocha? Yes ? Setup e2e tests with Nightwatch? Yes vue-cli · Generated "vue-project". To get started: cd vue-project npm install npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack vagrant@ubuntu:~/vagrant_data$image.png
2.2 进入vue 项目并运行
命令： vagrant@ubuntu:~/vagrant_data$ cd vue-project/ vagrant@ubuntu:~/vagrant_data/vue-project$ npm install vagrant@ubuntu:~/vagrant_data/vue-project$ npm run dev效果图： vagrant@ubuntu:~/vagrant_data$ cd vue-project/ vagrant@ubuntu:~/vagrant_data/vue-project$ ls build config index.html package.json README.md src static test vagrant@ubuntu:~/vagrant_data/vue-project$ npm install > phantomjs-prebuilt@2.1.15 install /home/vagrant/vagrant_data/vue-project/node_modules/phantomjs-prebuilt > node install.js PhantomJS not found on PATH Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-linux-x86_64.tar.bz2 Saving to /tmp/phantomjs/phantomjs-2.1.1-linux-x86_64.tar.bz2 Receiving... [========================================] 99% Received 22866K total. Extracting tar contents (via spawned process) Removing /home/vagrant/vagrant_data/vue-project/node_modules/phantomjs-prebuilt/lib/phantom Copying extracted folder /tmp/phantomjs/phantomjs-2.1.1-linux-x86_64.tar.bz2-extract->1505378871593/phantomjs-2.1.1-linux-x86_64 -> /home/vagrant/vagrant_data/vue->project/node_modules/phantomjs-prebuilt/lib/phantom Writing location.js file Done. Phantomjs binary available at /home/vagrant/vagrant_data/vue-project/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs > chromedriver@2.32.2 install /home/vagrant/vagrant_data/vue-project/node_modules/chromedriver > node install.js Downloading https://chromedriver.storage.googleapis.com/2.32/chromedriver_linux64.zip Saving to /tmp/chromedriver/chromedriver_linux64.zip Received 781K... Received 1568K... Received 2352K... Received 3136K... Received 3920K... Received 3978K total. Extracting zip contents Copying to target path /home/vagrant/vagrant_data/vue-project/node_modules/chromedriver/lib/chromedriver Fixing file permissions Done. ChromeDriver binary available at /home/vagrant/vagrant_data/vue->project/node_modules/chromedriver/lib/chromedriver/chromedriver npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) added 1297 packages in 205.973s vagrant@ubuntu:~/vagrant_data/vue-project$ npm run dev > vue-project@1.0.0 dev /home/vagrant/vagrant_data/vue-project > node build/dev-server.js > Starting dev server... DONE Compiled successfully in 6518ms 8:53:55 AM > Listening at http://localhost:8080 (node:13627) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Exited with code 3
2.3 运行效果
在宿主机的浏览器上输入 http://127.0.0.1:8080/#/ 出现如下效果图则代表成功。
image.png
3. 开发环境配置
前端开发工具 WebStrom
在宿主机上按照如下图解进行配置
新建一个空项目
设置同步部署方式（1）
设置同步部署方式（2）
设置同步部署方式（3）
设置同步部署方式（4）
同步vagrant 内部的代码
设置宿主机文件自动同步到vagrant中，来保证vue热更的正常的运行
到此，大家可以愉快的开发了。
