vue-cli 初体验

vue-cli 初体验

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

npm install -g @vue/cli

查看版本

vue --version

升级

npm update -g @vue/cli

创建项目

vue create test

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


demo file 设置全局共享数据 file 创建两个子组件 file 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>

路由设置 file

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

使用element UI

安装 npm i element-ui -S

file 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
                }
            }
        }
    }
}
猜你喜欢