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, "\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>>

效果圖以下