vue案例：项目的开始

1.在进行开始开发vue项目的时候，所需要的步骤。
npm init webpack 项目名字
npm run dev 运行项目
npm run build 编译打包项目
2.安装插件

 "dependencies": {
    "axios": "^0.19.2",
    "vant": "^2.4.6",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.1.2"
  },

开发依赖 npm install less less-loader
3.main.js配置

mport Vue from 'vue'
import App from './App'
import router from './router'//路由
import Axios from 'axios'//axios
import store from './store'//vuex
Vue.config.productionTip = false

Vue.prototype.$axios=Axios
// Axios 请求拦截器
Axios.interceptors.response.use(function (response) {
  // Do something with response data
  console.log('拦截器')
  console.log(response.data)
  return response.data;
}, function (error) {
  // Do something with response error
  return Promise.reject(error);
})

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
  
})

4.样式文件，自适应处理

mixin.less

.w(@px){
	width: unit(@px/37.5,rem);
}

index.html

<script>
      document.documentElement.style.fontSize=document.documentElement.clientWidth/10+'px'
    </script>

APP.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

此时可以进行开发了，首先先做tabBar组件，Header组件，在做别的页面组件。

5.路径处理


使用