vue-cli 初体验

vue-cli 初体验： 全局安装cli

npm install -g @vue/cli

查看版本

vue --version

升级

npm update -g @vue/cli

创建项目

vue create test

空格选中 选择Y, 选择Sass/SCSS with dart-sass 选择 ESLint + Standard config 选中Lint on saave与 Lint and fix on commit (这个有点烦，格式稍微有点问题就报错，安装完成后可以在.eslintrc.js修改配置) 选择 In dedicated config files 选择N 运行npm run serve 打包npm run build

demo 设置全局共享数据 创建两个子组件 App.vue组件配置

<template>
  <div id="app">
    <!-- <p>{{msg}}</p>
    <button @click="say">按钮</button>
    <button @click="getName">获取共享数据</button> -->
    <!-- 子组件 -->
    <!-- <login-sub></login-sub>

    <hello-world></hello-world> -->
        //路由跳转
    <router-link to="/Login">Go to Login</router-link>
    <br>
    <router-link to="/HelloWorld">Go to HelloWorld</router-link>
    <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
// import LoginSub from './components/LoginSub.vue'
  export default{
    name:'App',
    data:function(){
      return {
        msg:'999',
        str:'hello world'
      }
    },methods:{
      say(){
        console.log('say');
      },
      getName(){
        console.log(this.$store.state.name);
      }
    },
    components:{
      // LoginSub:LoginSub,
      // HelloWorld:HelloWorld
    }
  }
</script>

<style  scoped>
  p{
    background: firebrick;
  }
</style>

路由设置

修改webpack配置 创建vue.coonfig.js

使用element UI

安装 npm i element-ui -S

chrome 添加vue 插件 链接

安装axios进行http请求

npm install axios -S
全局注册，在main.js中 引入 import axios from 'axios' ， 

完整main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
import store from './store/index.js'
import axios from 'axios'
import storage from 'good-storage'//缓存

//请求前拦截
axios.interceptors.request.use((config) => {
  console.log(storage.get('Authorization'))
  if(config.method=='post'&&storage.get('Authorization')){
    config.headers.Authorization='Bearer '+storage.get('Authorization');
  }
  console.info(config,'请求前拦截');
  return config;
});
Vue.prototype.$axios=axios;
//请求后拦截
axios.defaults.crossDomain = true;
axios.interceptors.response.use((response) => {
  console.log(response,'请求后拦截,正常');
 return response;
}, function (error) {
  if(error.response.data.code==409){
      alert(error.response.data.msg);
  }
  console.log(error,'请求后拦截，异常',error,error.response.data);
  return error;
});
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

// 导入elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 在项目中使用elementui
Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

完整vue.config.js

const { dir } = require('console');
const path=require('path');
const webpack = require('webpack');
module.exports={
    outputDir:'bundle',//打包目录
    configureWebpack:{
        plugins:[
            new webpack.BannerPlugin({//版权信息
                banner:'中国好码农-blogs.chencong.fun'
            })
        ]
    },
    devServer:{//跨域代理设置
        open:true,
        host:'localhost',
        proxy:{
            '/api':{//匹配api
                target:'https://fission.chencong.fun',
                changeOrigin:true,
                pathRewrite:{
                    '^/api':''//替换api
                }
            }
        }
    }
}