vue-cli3构建H5移动应用(vant+rem)

安装 cli3.x 版本

关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。
如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过以下命令卸载它。

 npm uninstall vue-cli -g
 或
 yarn global remove vue-cli 

然后可以使用下列任一命令安装这个新的包:

npm install -g @vue/cli
或
yarn global add @vue/cli

拉取 2.x 模板 (旧版本)

Vue CLI >= 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

创建项目

vue create hello-world

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,
如果选择默认选项 default,将会构建一个最基本的 vue 项目(没有 vue-router 也没有 vuex)
也可以选 Manually select features“手动选择特性”来选取需要的特性.
下面是手动配置选项(空格键是选中和取消)

%title插图%num
11.png

这样就会创建一个包含 vue-router、vuex 和 postcss 的项目
勾选之后,使用回车键进入下一步

%title插图%num
22.png

这里需要选择路由模式,yes 是 history 模式,no 是 hash 模式,一般选用yes
后面还需要选择 ESLint 的校验规则,格式化的时机,和各个插件的配置项的位置,不熟悉的话就选第一个

下面这个选择了 In package.json

%title插图%num
33.png

最后选择是否将配置项保存为预设,然后配置完成,开始生成项目.
进入项目 、启动项目

npm run serve

以下是安装vantui部分,非此ui框架可以结束了

安装vant-ui

1.安装

# 安装 1.x 稳定版本
npm i vant -S

2.采用方式一 自动按需引入组件 (推荐)

# 安装插件
npm i babel-plugin-import -D

3.其后在babel.config.js 中配置

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

4.接着你可以在代码中直接引入 Vant 组件

Rem 适配

Vant 中的样式默认使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具

  • postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem
  • lib-flexible 用于设置 rem 基准值

1.下载lib-flexible

npm i lib-flexible --save

2.在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3.安装 postcss-pxtorem

npm install postcss-pxtorem -D

4.在根目录下创建 vue.config.js配置postcss-pxtorem

module.exports = {
    ...
    ...
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 37.5, // 换算的基数
                        selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
                        propList: ['*'],
                    }),
                ]
            }
        }
    },
}

配置完成后,即可在开发中直接使用 px 单位开发

Vue-cli3.x-自定义基础配置

在项目根目录创建 vue.config.js

module.exports = {
    publicPath:'/',//根路经  './'相对路径
    outputDir:'dist',//构建输出目录
    assetsDir:'assets',//静态资源目录(js,css,img,fonts)
    lintOnSave: false,//是否开启eslint保存监测,有效值:true  ||  false  ||  'error'
    devServer:{
        open:false, //项目运行起来自动打开浏览器
        host:'0.0.0.0',//可选值 'localhost'  ||  '127.0.0.1'  ||  '0.0.0.0'( 本机ip)
        port:8080,//端口号
        https:false,// http://127.0.0.1:8081/  与   https://127.0.0.1:8081/的区别
        hotOnly:false, //热更新
        proxy:{
            //配置跨域
            '/api':{
                target:'http://locallhost:5000/api/',
                ws:true,
                changOrigin:true,
                pathRewrite:{  //地址重写
                    '^/api':''
                }
            }
        }
    },
   //...
}

Vue-cli3.x-全局变量

规则:
*文件中必须以VUE_APP_开头
*通过process.env.XXX来使用
*通过.env配置环境变量
*通过.env[mode]区别开发和生产环境

区别:
.env.development =======>开发环境
.env.production =======>生产环境
.env=========> 在所有的环境中被载入

1.在项目根目录创建 .env 和 .env.development 和 .env.production 文件

%title插图%num
image.png

2.在其文件页面中可自定义变量,如图

VUE_APP_TITLE='我是全局title变量'

3.在.vue文件中读取全局变量

    data() {
      return {
        title:process.env.VUE_APP_TITLE
      }
    },

安装HTTP 服务

主要用于访问Vue打包后的页面路径,如访问dist中的index.html页面

1.安装

npm install -g serve

2.查看serve版本

serve -v

3.启用服务,同时指定目录

serve -s dist/
%title插图%num
红框中即是打包后的页面地址.png
 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:青梅博客 » vue-cli3构建H5移动应用(vant+rem)

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活