zoukankan      html  css  js  c++  java
  • vue项目初始化

    项目创建

    vue create meituan 

    sass配置

    安装 node-sass和sass-loader,然后在style标签中添加lang属性,就可以在style标签中使用sass语法来愉快的写css了

      npm install node-sass@4.12.0 --save-dev

      npm install sass-loader@8.0.0 --save-dev

    <style lang="scss">
    @import "styles/init.css";
    </style>>

    rem配置

    安装2个包 postcss-pxtorem 和 lib-flexible,然后在package.json中添加配置文件就可以使用了

    npm install postcss-pxtorem --save-dev
    npm install lib-flexible --save-dev

    配置

     “postcss": {
        "plugins": {
            "autoprefixer": {},
            "postcss-pxtorem": {
                "rootValue ": 37.5,
                "propList": [
                   "*"
                ],
              "selectorBlackList": [
                "van-*"
              ]
            }
        }
      }

    在main.js中导入使用

    import "lib-flexible"

    vant配置

    安装2个包 babel-plugin-import 和 vant 然后在babel.config.js中配置

    // 安装
    npm install babel-plugin-import --save-dev npm install vant --save // 配置

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

    配置init.css 

    新建个init.css文件为了初始化html标签的属性,放在全局的css样式中

    init.css文件内容

    a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { margin: 0; padding: 0; border: 0; font-family: "PingFangSC-Regular", Hiragino Sans GB, Arial, Helvetica, "5B8B4F53", sans-serif;}

    新建一个组件导入使用

    新建Home.vue

    <template>
      <div class="Home">
        <h1>这是首页</h1>
      </div>
    </template>
    
    <script>
    export default {
      name: "Home",
      data : function () {
        return {
          
        }
      }
    }
    </script>
    
    <style>
    
    </style>

    在App.vue中导入使用

    <template>
      <div id="app">
        <Home></Home>
      </div>
    </template>
    
    <script>
    import Home from "./components/Home"
    export default {
      name : "app",
      components : {
        Home
      }
    }
    
    </script>
    <style lang="scss">
    @import "styles/init.css";
    </style>>

    效果图如下

  • 相关阅读:
    悼念512汶川大地震遇难同胞——珍惜现在,感恩生活--hdu2191(多重背包模板)
    Gunner II--hdu5233(map&vector/二分)
    Geometric Progression---cf 567C(求组合方式,map离散)
    Guess Your Way Out! II---cf 558D (区间覆盖,c++STL map 的使用)
    Amr and Chemistry---cf558C(暴力,加技巧)
    汉诺塔IV---hdu2077
    Safe Or Unsafe--hdu2527(哈夫曼树求WPL)
    Divisibility by Eight---cf550C(被8整除 暴力)
    Charles使用技巧
    RabbitMQ-高级特性(六)
  • 原文地址:https://www.cnblogs.com/huameixiao/p/11615567.html
Copyright © 2011-2022 走看看