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

vue三十八：Vue美团项目之项目初始化

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页

vue三十八：Vue美团项目之项目初始化

<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

vue三十八：Vue美团项目之项目初始化

<template>
    <div 

</style>

启动项目

vue三十八：Vue美团项目之项目初始化