搭建vue项目及基本配置（vue+webpack+axios)

前期准备

1 安装 node : https://nodejs.org/en/
2 全局安装 vue-cli

npm i vue-cli -g

初始化项目

使用vue的脚手架直接在本地初始化项目
方法：命令行：vue init <template-name> <project-name>

template-name选项为模板名称，vue-cli官方为我们提供了5种模板。

• webpack-一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。

• webpack-simple-一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。

• browserify-一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。

• browserify-simple-一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。

• simple-一个最简单的单页应用模板。

project-name 为项目名称。

这里以常用的webpack为例，
运行：vue init webpack shengyuan

【项目名不能大写】
结束后得到一个 shengyuan文件夹，里面大概就是这样了

然后当前目录命令运行：npm run dev
当看到 Compiled successfully 则表示我们的初始化到这就成功了。

修改结构

通常主要是根据项目需要在原来的基础上增删一些文件，操作下来后得到我想要的结构：（红色为修改部分）

接下来，我们做一个home到autoPage页的跳转。

配置路由

在router/index.js中
这里使用的是路由懒加载的方式：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  //滚动到顶部
  scrollBehavior(to,from,savePosition){
    return{x:0,y:0}
  },
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      path: '/home',
      name: 'home',
      component: resolve=>require(['../views/home/home.vue'],resolve),
    },
    {
      path: '/autoPage',
      name: 'autoPage',
      component: resolve=>require(['../views/autoPage/autoPage.vue'],resolve),
    }
  ]
})

scrollBehavior 部分用于保证跳转到新页面时，滚动条处于顶部。
在main.js中将路由挂在在app根实例上：

import router from './router'
var app=new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

接下来
http://127.0.0.1:8080/#/autoPage
http://127.0.0.1:8080/#/home
路由切换成功生效。

配置vuex状态管理及使用

为了更灵活的控制组件间的状态，通常我们会使用vuex，并且还能管理一些固定的数据方便使用。

• 下载vuex包
  npm i vuex -s

• 新建store文件；
  

• 在store.js中

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    appName:'demo'
  },
  getters: {
    getState: (state) => (param) => {
      return state[param];
    }
  },
  actions: {
    setState:(context,obj)=>{
      context.commit('setState',obj);
    }
  },
  mutations: {
    setState:(state,obj)=>{
      state[obj.name]=obj.value;
    }
  },
  modules: {
  }
})

上面定义了最常用的方法setState，方便自定义修改state数据；

• 使用方式：
  例如在home.vue中，需要将 $store.state.appName值修改；

 setAppName:function(){
            this.$store.dispatch('setState',{name:'appName',value:this.appName})
          }

效果大概就是：

Sass的配置使用

• 下载包： npm i node-sass sass-loader -s
  Sass 有两种语法格式：scss(.scss)和sass(.sass)。这里的项目使用的是scss。
  具体scss的使用方式参照 sass官网文档 就好了。下面在home中使用scss,方式如下：
  
  到这里基本就结束了，打包 npm run build 然后本地打开试试一下，嗯…控制台报错，问题是index.html引用不到静态资源，错误如下：
  
  
  很明显因引用地址不对，去到config.js找到build中的assetsPublicPath，用于配置静态资源的路径，将原来的‘/’改’./'就可以了。
  
  到这里，vue的基本搭建还有常用配置就结束了。

配置axios和全局方法

我选择 axios 主要原因主要是:

• 使用Promise管理异步，告别传统callback方式；
• 支持拦截器等高级配置

配置：

• 下载axios：npm i axios qs
  这里的qs是配合axios使用，用于处理post请求的参数。（qs更多）
• 新建文件gob.js并配置为全局
  
• main.js中通过prototype 属性向vue对象添加属性和方法。

import Vue from 'vue'

import gob from './util/gob.js'
Vue.prototype.$gob =gob;

接下来通过vue对象的$gob使用就好，例home.vue使用gob中的post方法：

<span @click="$gob.post()">调用gob的post方法</span>

• 在gob中封装常用的post和get方法

import axios from 'axios'
import qs from 'qs'
import store from '../store/store.js'

let gob = {
  //域名配置
  webUrl:"后台接口IP",
  post:function(vueObj,options,newUrl){//post请求
    options.arg=options.arg||{};
    var ipName='';
    !newUrl?ipName=this.webUrl:ipName=newUrl;
    return new Promise(function(resolve, reject) {
      axios.post(
          ipName+options.url,
        qs.stringify(options.arg))
        .then(function (response) {
          //成功逻辑
          resolve(response.data);
        })
        .catch(function (error) {
          //失败逻辑
          reject(error);
        });
    })
  },
  get:function(vueObj,options,newUrl){
    options.arg=options.arg||{};
    var ipName='';
    !newUrl?ipName=this.webUrl:ipName=newUrl;
    return new Promise(function(resolve, reject){
      axios.get(ipName+options.url,{params:options.arg})
        .then(function (response) {
          //成功逻辑
          resolve(response.data);
        })
        .catch(function(error){
          //失败逻辑
          reject(error);
        });
    })
  },
}

export default gob

参数说明：
vueObj 必填，主要适用于请求里面获取app这个根实例。
options 必填，格式：{url:‘xxx’,arg:{}}
newUrl 选填 用于请求的接口ip不是上面的WebUrl时，这里填另外的IP。

例：home中调用gob的post方法：

methods:{
	 postApi:function(){
            this.$gob.post(this,{url:'/getList',arg:'index:1,count:10'}).then((res)=>{
                console.log(res)
			})
          },
}

以上就是全部。

生命周期

使用vue要知道的vue的生命周期图
一个vue文件可看做一个组件，这些可嵌套可复用的组件与根实例组成一个vue应用。

配置rem

https://blog.csdn.net/github_38928905/article/details/90080956