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
  • 相关阅读:
    怎么使用 Jupyter Notebook 进入指定的目录
    安卓手机安装Xposed框架/钉钉虚拟定位
    Some of the Example google dorks 2019谷歌hacker语法检索表
    在心脏内部,普通的WEB用户会怎样? 心脏滴血漏洞分析学习
    Windows的安全配置基础,打造一个安全点的Windows
    计算机存储单位
    Python如何安装whl文件,python安装py包
    jdk文件中javaw的作用
    msfconsole基础使用,简洁高效学习版
    VirtualBox报错:不能为虚拟电脑XXX打开一个新任务
  • 原文地址:https://www.cnblogs.com/zhongyehai/p/12506400.html
Copyright © 2011-2022 走看看