Vue从零搭建有板有眼的项目

之前一直只是听说vue有多强，有多火，最近终于真正接触到了它，说实话从零开始确实是有些曲折。因为要搭建一个前后端分离的项目，所以一开始就被困住了，标准的/典型的vue前端框架结构应该是怎样的呢？一脸茫然，从GitHub、码云上下一个demo，删一个demo，要么太复杂，要么还是看不太懂。最后终于找到一个还算看得太懂的项目，也可能是浏览量的变化引起了质的变化，看多了，好像也都是这么回事。废话不多说了，直接手把手从零开始吧。

1 环境准备

1.1 系统环境

安装node.js，于是也会有npm，后续基本所有的命令都是建立在npm基础上的，但是由于npm安装速度慢，所以选用了淘宝的镜像cnpm。

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

安装vue和脚手架vue-cli (这里就解决了项目结构的疑问，通过脚手架初始化项目规范化又及其方便)

cnpm install vue
cnpm install --global vue-cli 

1.2 开发环境

查阅了一下比较流行的有VSCode和WebStorm，一开始想要选用的是WebStorm，因为这个看起来就和idea一样有种亲切感，但奈何太卡了，最后放弃了，选择了VSCode，现在也挺喜欢这个了，轻量，简单，速度快。

 

2 项目搭建

2.1 脚手架初始化项目

进入到你想创建项目的目录下，打开cmd（win10，按住shift，右键，选择Power Shell，输入start cmd），利用脚手架进行初始化项目。

那些选项一般都是直接按Enter，唯一需要注意的可能就是ESLint语法检测。最后等待一段时间，就可以进到所在目录查看到新建的项目了。

2.2 项目结构说明

像其中有些api、views目录是后面新建的，api是请求接口地址，views是各种vue界面，然后package.json中有dependency，一些依赖包。

2.3 项目运行

首次运行需要安装模块，输入命令npm install，安装过程中会根据package.json中的依赖增加一个文件夹node_modules。
运行项目，输入命令npm run dev，然后在浏览器中输入地址localhost:8080，可以看到一个欢迎界面。

另外其实也可以直接用VSCode打开，按ctrl + ~(数字键1旁边的按钮)，输入命令即可。

2.4 项目打包

直接用VSCode打开，按ctrl + ~(数字键1旁边的按钮)，输入命令npm run build，之后项目会出现一个dist目录，里面包含打包编译之后的static和index.html。然后直接可以把dist里的内容放到后台代码的resource的static目录下

 

3 项目提交

VSCode git提交

 

4 Vue项目Linux（Ubuntu）部署

Ubuntu安装node，npm

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

清除node缓存；
sudo npm cache clean -f  
安装node版本管理工具'n'
sudo npm install n -g
使用版本管理工具安装指定node或者升级到最新node版本；
sudo n stable  （安装node最新版本）

vue打包，cnpm run build，一直卡住，参考

Vue项目部署

1）后端部署：将打包后的dist文件放置到tomcat下面

2）前端部署：Nginx部署

sudo apt-get install nginx 全局安装，操作简单
nginx -v
sudo service nginx start
启动后直接访问ip地址就能够看到一个Nginx的欢迎页面
whereis nginx.conf 可以查看到文件安装路径,配置文件在etc/nginx/nginx.conf 在http中加入如下
server{
    listen	9999;
    root	/home/xxxxx/xxx/xxx-vue/dist;
    index	index.html;
}
sudo nginx -s quit 停止nginx服务