Linux下Vue开发环境搭建一篇全搞定

本文介绍在Linux环境下从零开始搭建Vue开发环境的整个过程，包括vue的安装，webstorm 安装配置，devtools的安装。

注：使用的linux的系统版本为Ubuntu16.04（64位）

1.安装nodejs

• 从nodejs官网(http://nodejs.cn/download/)下载安装包

• 解压到相应的文件夹

tar -xvf node-v8.1.2-linux-x64.tar.xz -C ../env/
1

在env文件夹下会出现相应目录：

• 建立软链接

sudo ln -s /home/formularoom/env/node-v8.1.2-linux-x64/bin/node /usr/local/bin/nodesudo ln -s /home/formularoom/env/node-v8.1.2-linux-x64/bin/npm /usr/local/bin/npm
1
2

• 验证 
  使用node -v和npm -v来验证是否安装成功，若安装成功则会看到相应的版本信息。

2.安装cnpm

安装cnpm是因为使用npm install安装包时速度很慢，所以建议安装cnpm后使用cnpm install来安装包。

npm install -g cnpm --registry=https://registry.npm.taobao.org
1

安装完成后同样要建软链接，否则在使用cnpm时会报No command 'cnpm' found的错误。

sudo ln -s /home/formularoom/env/node-v8.1.2-linux-x64/bin/cnpm /usr/local/bin/cnpm
1

可以使用cnpm -v来进行验证。

3.安装vue-cli

cnpm install -g vue-cli
1

安装完成后同样要建立软链接，否则会报No command 'vue' found的错误。

sudo ln -s /home/formularoom/env/node-v8.1.2-linux-x64/bin/vue /usr/local/bin/vue
1

如果不想每次全局安装后都去建立软链接，可以在安装完npm或cnpm后，使用以下命令将安装路径指向/usr/local，这样之后使用npm或cnpm安装包之后就可以直接使用命令。 
npm config set prefix /usr/local 
cnpm config set prefix /usr/local 
设置完之后可以使用下列命令进行查看。 
npm root -g 
cnpm root -g

4.使用vue-cli创建项目

vue init webpack firstproject
1

下载完成后执行下列命令可运行项目查看效果：

cd firstprojectcnpm installcnpm run dev
1
2
3

5.安装webstorm

前面几步已经在Ubuntu16.04中搭建好了vue的基本的开发环境，并创建了一个叫firstproject的vue项目，但正式开发通常会使用到开发工具，这里我使用的是webstorm，下面介绍如何在ubuntu中安装webstorm，并且进行相关配置。

• 在webstorm官网(http://www.jetbrains.com/webstorm/)下载安装文件

• 解压到相应的文件夹中

 tar zxvf WebStorm-2017.1.4.tar.gz -C ../devtool/
1

• 安装webstorm 
  进入安装目录的bin文件夹下运行webstorm.sh脚本。

cd xxx/devtool/WebStorm-171.4694.29/bin./webstorm.sh
1
2

这样webstorm就安好了，其它的配置可以参考《Webstorm安装和配置 》这篇文章。

• 将webstorm添加到Launcher或桌面 
  执行sudo gedit /usr/share/applications/webstorm.desktop,在webstorm.desktop文件中输入以下内容：

[Desktop Entry]Type=ApplicationName=WebStormExec="/home/formularoom/devtool/WebStorm-171.4694.29/bin/webstorm.sh" %fIcon=/home/formularoom/devtool/WebStorm-171.4694.29/bin/webstorm.svgCategories=development;IDE;
1
2
3
4
5
6

之后执行sudo chmod +x /usr/share/applications/webstorm.desktop给文件添加执行权限。 
最后执行sudo nautilus /usr/share/applications打开applicaions文件夹找到webstorm的图标，将其拖到Launcher中或者桌面上即可。

6.安装chrome浏览器

chrome中有一个比较不错的vue调试插件，而Ubuntu默认只装了Firefox，因此还要装一下chrome。 
安装步骤很简单，只需要两步:

• 下载安装包：

 wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
1

建议安装proxychains后使用代理进行下载。

• 安装

sudo dpkg -i google-chrome*; sudo apt-get -f install
1

7.安装vue devtools

如果你可以翻墙，直接去Google应用商店里搜devtools安装即可，这里介绍如何在不翻墙的情况下进行安装。

• 下载crx文件 
  下载地址：https://www.crx4chrome.com/crx/11903/，去这里下不用翻墙，也可以自己百度搜其它下载地址。

• 安装 
  点击chrome右上角的按钮打开菜单-Moretools-Extensions。

将下载好的crx文件拖入到此页面中点击Add extension即可安装。

显示在列表中即安装成功，浏览器右上角也会出现一个vue的图标。

到此为止，Linux环境下的Vue开发环境就搭建完成了，现在可以在Webstorm中进行开发，并在Chrome中使用Vue devtools进行调试了。