使用NodeJs和VueJs搭建网站

一、工具

Vue.js

Vue是一套用于构建用户界面的渐进式框架。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue官方网站

ElementUI

一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

ElementUI官网

可以直接去官网的组件中，选择想要的组件，复制代码直接使用。

NodeJs

Node.js 是能够在服务器端运行JavaScript 的开放源代码、跨平台 JavaScript 运行环境。

安装：sudo apt-get install nodejs

npm

npm 是 Node.js 官方提供的包管理工具，他已经成了 Node.js 包的标准发布平台，用于 Node.js 包的发布、传播、依赖控制。npm 提供了命令行工具，使你可以方便地下载、安装、升级、删除包，也可以让你作为开发者发布并维护包。

安装

sudo apt-get install nodejs

ps. 安装完后需要使用npm config set registry https://registry.npm.taobao.org切换成淘宝镜像，不然速度很慢。

更新

npm i -g n

n latest

安装vue

npm i -g @vue/cli

服务端后台常驻进程

npm i -g nodemon

MongoDB

一个数据库

官网安装步骤

或

sudo apt-get install mongodb-server

Nginx

Nginx是异步框架的网页服务器，也可以用作反向代理、负载平衡器和HTTP缓存。简单来说，就是通过服务器通过Nginx替你找到html文件。

安装

sudo apt-get install nginx

配置

1. 在线配置nginx：Go Nginx config

2. 根据要求依次选择相应的

   • 网站配置选项：Preset，域名等等
   • 全局配置选项：刚开始基本不用管

3. 下载/复制config文件

4. 把config文件复制到服务器的/etc/nginx/sites-available/文件夹中，再在/etc/nginx/sites-enabled/中创建一个软连接指向/etc/nginx/sites-available/中的config文件

   例如域名为test.com：
   cp sites-available/test.com.conf /etc/nginx/sites-available/

   cd /etc/nginx/sites-avaible

   sudo ln -s ../sites-available/test* /etc/nginx/sites-enabled/

5. Change me@example.com to your email
   sudo certbot --non-interactive --redirect --agree-tos --nginx -d test.com -m me@example.com

二、搭建项目

示例项目

项目初始化及其框架

以示例项目为例：

• admin是管理员界面项目，可以用vue create admin来创建，里面包含public和src文件夹，src文件夹就是源代码所在文件夹
• desktop是pc桌面界面项目，可以用vue create desktop来创建
• web是移动端界面项目，可以用vue create web来创建
• server是nodejs组成的服务端项目，包括给后台和前端提供的接口。
  • 使用mkdir server创建文件夹后cd server，使用npm init -y初始化一个node项目（会生成一个package.json文件）
  • 再在文件夹里新建一个index.js作为服务端入口文件
  • 在package.json的scripts中，插入一行"serve": "nodemon index.js",。这样就可以在server中使用npm run serve来运行服务器项目

初始化完以后就可以cd进各个文件夹使用npm run serve本地运行，查看每个项目的效果。

ps: 如果提示错误，可以先使用npm i安装依赖

安装elementUI和路由

在admin和desktop中，使用vue add element安装ElementUI，vue add router安装路由。

vue项目文件说明

以admin为例：

• public可以先不管
• src是项目源代码
  • components是组件文件夹
  • views存放的主要是总体页面的代码，views中新建.vue文件后，需要再../router.js中增加路由

项目部署

服务器系统设置

Install Packages

1. Install Nodejs

   sudo apt-get install nodejs

2. Install npm

   sudo apt-get install npm

3. Config Taobao registry

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

4. Update Nodejs

   npm i -g n

   n latest

   Reload cmd shell

5. Install pm2

   npm i -g pm2

6. Install Mongodb

   sudo apt-get install mongodb-server

7. Install Nginx

   sudo apt-get install nginx

8. Install certbot

   sudo apt install -y nginx certbot python-certbot-nginx

Setup

cd desktop
npm i
npm run build

npm run build可以编译成静态html文件，直接打开

把npm run build改为npm run server可以在本地测试网站效果

注意：build之前需要把对应文件夹里的vue.config.js（如：desktop/vue.config.js）中的publicPath的/改为./。outputDir:可以改为你想要编译到的目的路径

以示例项目为例，build 后在desktop中生产的dist文件夹就是静态html文件目录，点击dist/index.html就可以打开网站，把生成的dist文件夹里的文件放到服务器的对应文件夹就可以访问了。

Ref

• 学习视频