首页 > 其他 > 详细

vue项目初始化

时间:2019-10-01 17:45:34      阅读:94      评论:0      收藏:0      [点我收藏+]

项目创建

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, "\5B8B\4F53", 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>>

效果图如下

技术分享图片

 

vue项目初始化

原文:https://www.cnblogs.com/huameixiao/p/11615567.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!