[原创]Ubuntu16.04搭建VUE + WebStorm

不多说，见名知意：基于Ubuntu16.04搭建VUE + WebStorm

开篇先讲Chrome安装

sudo wget http://www.linuxidc.com/files/repo/google-chrome.list -P /etc/apt/sources.list.d/

wget -q -O - https://dl.google.com/linux/linux_signing_key.pub  | sudo apt-key add -

sudo apt-get update

sudo apt-get install google-chrome-stable

/usr/bin/google-chrome-stable

安装flash（非必须），如果不嫌慢，用这个指令就可以慢慢安装了

sudo apt-get install flashplugin-installer

如果觉得慢的不行，建议参考
https://download.csdn.net/download/kunpeng_82/4972887?web=web

1. JS环境篇

先说清楚软件之间的关系：

VUE是JS前端前端框架，还是JavaScript
JS运行需要一定的环境，这就是NodeJS
而NodeJS有许多版本，得有个软件来管理，这就是npm
众所周知的原因，有时候npm不稳定啊，搞个淘宝镜像吧，还不行就用国内的cnpm

安装nodejs和npm

sudo apt-get install nodejs
sudo apt install nodejs-legacy
sudo apt install npm

更新npm淘宝镜像源

sudo npm config set registry https://registry.npm.taobao.org
sudo npm config list

全局安装n管理器,用于管理nodejs版本

sudo npm install n -g

安装最新的nodejs（stable版本）

sudo n stable
sudo node -v

安装vue命令行，俗称vue脚手架

sudo npm install --global vue-cli

测试：

（test是自己建的路径，比如/home/abtroot/study/vue/下建立test，cd到test目录下）
vue init webpack abt
（abt是你的项目名称，cd 到abt目录下）
npm run dev

浏览器输入localhost：8080就可以访问了，搞定（但是，如果这个端口被占用，或者断开还没立即释放，那么VUE可能开启8081、8082等等）

2. Java环境篇

先检查java环境java -version，如果没有版本输出信息，则要按步骤完成安装。若已安装，则可跳过

安装jdk

https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

选择Linux-x64，即jdk-8u211-linux-x64.tar.gz（你看到的可能不是这个版本，不影响）

解压tar并安装（这个文件在home/你的名字/Downloads下）

tar -zxvf jdk-8u211-linux-x64.tar.gz

sudo mv jdk1.8.0_211 /opt/

sudo vim ~/.bashrc

#set Java environment
export JAVA_HOME=/opt/jdk1.8.0_211
export JRE_HOME=${JAVA_HOME}/jre
export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib
export PATH=${JAVA_HOME}/bin:$PATH

source ~/.bashrc

检查java

java -version

在这里插入图片描述

3. WebStorm篇

官网下载linux版本 https://www.jetbrains.com/webstorm/
解压tar并安装（）

tar -zxvf Webstorm-2019.1.1.tar.gz

sudo mv Webstorm-191.6707.60 /opt/

cd /opt/Webstorm-191.6707.60/bin
sudo sh webstrom.sh

完成安装，便启动了
下次启动，你可以输入以下命令

./opt/Webstorm-191.6707.60/bin/webstorm.sh

（顺便说一下：如果在脚本启动中，出现：GLib-GIO-CRITICAL **: g_dbus_connection_get诸如此类的错误，是环境变量的问题。
不是你设置的问题，这里有一个老生常谈的点：su和su -

su - root is the same as su -
just like login as root, then the shell is login shell,
which mean it will expericene a login process,
usually .bash_profile and .bashrc will be sourced

su root is the same as su
like you open an interactive shell in root name,
then only .bashrc will be sourced.

su 后面不加用户是默认切到 root
su 是不改变当前变量
su - 是改变为切换到用户的变量

也就是说su只能获得root的执行权限，不能获得环境变量
而su -是切换到root并获得root的环境变量及执行权限

语法：

$ su [user_name]
su 命令可以用来交互地更改你的用户ID和组ID。 Su是switch user 或set user id的一个缩写。这个命令让你开启一个子进程，成为新的用户 ID 和赋予你存取与这个用户ID 关联所有文件的存取权限。因此，出于安全的考虑，你在实际转换身份时，会被要求输入这个用户帐号的密码。如果没有参数，su 命令将你转换为 root(系统管理员)。root 帐号有时也被称为超级用户，因为这个用户可以存取系统中的任何文件。

$ su – username
一些配置文件是为你的对话线索而设立的。当你使用命令 su username时，你的对话特征和你原始的登录身份一样。如果你想要你的对话进程拥有转换后的用户 ID一致的特征，你要使用短斜杠: su – username。
）

当然，方便起见，还是在系统栏创建一个图标
在这里插入图片描述
3. WebStorm配色不好看？来配个色
http://color-themes.com/?view=index&page=1&order=popular&search=&layout=HTML
看看哪个喜欢，直接下载不用解压，直接import就行。

4. WebStorm打开刚刚新建的工程

在webStorm中打开刚刚新建的VUE
在这里插入图片描述
在终端输入npm run dev

编译成功，端口是8081

检验8081端口