zoukankan      html  css  js  c++  java
  • vue三十八:Vue美团项目之项目初始化

    项目初始化:
    1. vue create 项目名
    2. sass配置:
      * npm install node-sass@4.12.0 --save-dev
      * npm install sass-loader@8.0.0 --save-dev
      * style就可以通过lang='scss'来写sass语法了。
    3. rem配置:
      * npm install postcss-pxtorem --save-dev
      * npm install lib-flexible --save-dev
      * package.json:
      "postcss": {
        "plugins": {
          "autoprefixer": {},
          "postcss-pxtorem": {
            "rootValue ": 37.5,
            "propList": [
              "*"
            ],
            "selectorBlackList": [
              "van-*"
            ]
          }
        }
      }

      * main.js:import "lib-flexible"
    4. vant:
      * npm install babel-plugin-import --save-dev
      * npm install vant --save
      * 在babel.config.js中配置以下:
      module.exports = {
        plugins: [
          ['import', {
            libraryName: 'vant',
            libraryDirectory: 'es',
            style: true
          }, 'vant']
        ]
      }

    5. styles/init.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: Montserrat, 'Microsoft YaHei', 'Heiti SC', simhei, 'Lucida Sans Unicode', 'Myriad Pro', 'Hiragino Sans GB', Verdana;
    font-size: 14px;
    }

    main.js

    import Vue from 'vue'
    import App from './App.vue'
    import "lib-flexible"

    Vue.config.productionTip = false;

    new Vue({
    render: h => h(App),
    }).$mount('#app');

    home页

    <template>
    <div class="home-container">
    这是home首页
    </div>
    </template>


    <script type="text/ecmascript-6">
    export default {
    name: "home",
    data(){
    return {}
    },
    components: {}
    };
    </script>


    <style scoped lang="sass">

    </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="sass">
    @import "styles/init.css"

    </style>

    启动项目

    讨论群:249728408
  • 相关阅读:
    Android基础-Android Bitmap高效加载策略
    Android基础-Android进程间通信方式
    Android基础-Android虚拟机及编译过程
    Android基础-View测量、布局及绘制原理
    Android基础-Window、Activity、DecorView以及ViewRoot之间的关系
    Android基础-LruCache原理解析
    Android基础-IntentService详解
    Android基础-AsyncTask详解
    linux 校准时间
    网站自动识别移动端访问并跳转
  • 原文地址:https://www.cnblogs.com/zhongyehai/p/12506400.html
Copyright © 2011-2022 走看看