基于generator-vuecli-3-mobile为例

导读

面对复杂的 Web 应用的开发，良好的流程和工具支持是必不可少的，可以让日常的开发工作更加顺畅。Yeoman 作为一个流行的工具集，在整合了 Yo、Grunt 和 Bower 等工具的基础上，定义了一个更加完备和清晰的工作流程。通过把一些最佳实践引入到 Web 应用中，有助于创建高质量和可维护的应用。

登录服务器修改主配置文件

1

vim /etc/nginx/nginx.conf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    // 自定义的所有Nginx配置都自动加载到主配置文件中
    include /etc/nginx/conf.d/*.conf;
}

安装

Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

1
2
3

npm install -g @vue/cli
# OR
yarn global add @vue/cli

检查版本是否正确（3.x）

1

vue --version

这里我们来看看scheme拼接协议的格式：
< a href=”[scheme]://[host]/[path]?[query]”>启动应用程序< /a>

各个项目含义如下所示：

scheme：判别启动的App。 ※详细后述

host：适当记述

path：传值时必须的key ※没有也可以

query：获取值的Key和Value ※没有也可以

今天做练手项目部署的时候碰到了个奇怪问题，开发环境里显示得好好的CSS prefixer样式，到production环境就消失了。
我开发环境用的是 scss ，刚开始我还以为是 scss 处理器的问题，后来研究了下 build 脚本，发现人家把CSS统一用一个插件给压缩了，然后追查之下发现这个插件用了 postCSS 的 autoprefixer 插件。
这下问题就清楚了，因为 autoprefixer 插件会针对支持的浏览器进行CSS 前缀的删除和追加。

比如：

1
2
3
4

a {
  -webkit-border-radius: 5px;
          border-radius: 5px;
}

编译成：