5分钟学习Vue

发表于 更新于 分类于 阅读次数：

本文的主线 定义 => 安装 => 开发 => 打包 => 部署

定义

Vue是什么?

  • Vue是一个Web前端开发框架

安装

首先 安装Node.js环境

1
2
3
4
5
6
7
8
9
10
node -v
# v12.14.1

npm -v
# 6.13.4

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

cnpm -v
# cnpm@6.2.0

然后 安装Vue CLI => 用于创建Vue项目

1
2
3
4
cnpm install -g @vue/cli

vue -V
# @vue/cli 4.5.13

开发

首先 创建Vue项目

1
2
3
4
vue create vue-demo
# Default ([Vue 2] babel, eslint)

cd vue-demo

接着 启动Vue项目

1
npm run serve

最后 使用浏览器打开http://localhost:8080/ => 页面如下图

learn-vue-in-5-minutes-01.png

打包

1
2
3
4
npm run build

ls dist
# css         favicon.ico img         index.html  js

部署

首先 安装和配置Nginx => 基于Ubuntu 1804 Server

1
2
3
sudo apt install -y nginx

sudo vim /etc/nginx/sites-enabled/vue-demo.conf
1
2
3
4
5
6
7
8
9
server {
    listen 80;
    server_name vue-demo.com;

    location / {
        root /opt/sites/vue-demo/dist;
        try_files $uri $uri/ /index.html?$query_string;
    }
}

然后 确认Nginx配置成功 并重新加载配置以生效

1
2
3
4
5
sudo nginx -t
# nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
# nginx: configuration file /etc/nginx/nginx.conf test is successful

sudo nginx -s reload

最后 使用浏览器打开http://vue-demo.com/ => 注意修改hosts解析域名至该服务IP