vue 项目 之 移动端周边商城 【0项目搭建】

1 初始化项目

vue init webpack code_zb

2 先跑项目
接下来的操作移步到 vs code中

2 安装 vant ui库
请看我的另一篇博文 这里不做 详细说明
vue项目中按需引入vant组件

3 配置好vant之后做个简单测试

<template>
  <div class="hello">
    <van-button type="info">测试van-button>
  div>
template>

<script>
import {Button} from 'vant'
export default {
  components: {
    vanButton: Button
  },
  data () {
    return {
    }
  }
}
script>

<style scoped>

style>

4 配置 scss
这里我也不做过多说明 请看我另一篇博文
vue项目配置sass

配置完之后进行测试

<template>
  <div class="hello">
    <van-button type="info">测试van-button>
    <div class="text">scss测试div>
  div>
template>

<script>
import {Button} from 'vant'
export default {
  components: {
    vanButton: Button
  },
  data () {
    return {
    }
  }
}
script>

<style lang='scss' scoped>
.hello{
  .text{
    color:red
  }
}
style>

效果

5 安装 lib-flexible 移动端适配方案 （出自阿里）

cnpm install lib-flexible --save

没有 import之前

在 main.js 中 直接 import 就好

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import 'lib-flexible'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

效果

到这里呢 静态页面的项目初始化搭建基本就完成 线上项目还需调用接口 兼容方案等等

请求

cnpm install axios -S

转es5

cnpm install babel-polyfill  --save-dev 

等等 以及一些其他插件库

后续会继续更新该项目的其他页面布局