# h5app

**Repository Path**: nicefree/h5app

## Basic Information

- **Project Name**: h5app
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-01-12
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

安装node、vue-cli
npm install -g vue-cli

vscode 安装cssrem插件 配置：文件->首先项->用户设置 搜索cssrem 设置root font size
根据设计稿而定，例如设计稿为750的就设置37.5(非绝对)

config\index.js
修改默认启动端口
dev{
    port: 9211
}

build\webpack.dev.conf.js
本机ip可以访问
const HOST = process.env.HOST || '0.0.0.0'

vue2使用less
1. npm install  style-loader less less-loader --save-dev
2. 【这步省略了!!!巨坑，越来越傻瓜化了】修改webpack.base.conf.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加
{
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader"
}
3. 组件中使用
    <style scoped lang="less">
    .hello {
        color: red;
        font-size: 0.45rem;
        h2 {
        color: blue;
        }
    }
    </style>
scoped给不同组件的所有html添加一个属性，然后在css中使用属性选择器来防止作用域的污染
4. 引入外部less文件则在style标签之后引入 @import './index.less'
<style lang="less">
@import './index.less';  //引入全局less文件
</style>

5. 很多使用一个应用都有相应的重置样式，或者定制主题样式，如果引入可以参考App.vue
<style lang="less">
  @import './assets/css/app.less';  // 全局样式
</style

6. less语法文档http://www.bootcss.com/p/lesscss/#docs


安装mint-ui移动端ui组件， 文档：https://mint-ui.github.io/#!/zh-cn
npm install mint-ui -save

npm run build 不生成map文件
config\index.js  
productionSourceMap: false,