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
  • 相关阅读:
    判断安卓或是IOS
    安卓、IOS内嵌H5的相互通信
    原生js tab选项卡粗略封装
    关于抓包
    vue学习的第一天——vue-router的相关使用
    关于jQuery插件封装的总结
    mvc生成静态页
    C#调用java代码
    汉字转16进制,汉字转10进制
    Model 类型为dynamic或者list<dynamic>
  • 原文地址:https://www.cnblogs.com/zhongyehai/p/12506400.html
Copyright © 2011-2022 走看看