笔记《vue快速入门并实战》

npm install -g @vue/cli

vue create tiangou_shop

选项：
1）
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint)
> Default ([Vue 2] babel, eslint)
Manually select features

vue init webpack tiangou_shop

选项：
? Project name demo1-webpack
? Project description A Vue.js project
? Author
? Vue build runtime
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests Yes
? Pick a test runner noTest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

vue create tiangou_shop

选项：
1）
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features
  
2）
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
>( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

 3）
 ? Choose a version of Vue.js that you want to start the project with
  3.x
> 2.x
      
 4）
 ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
      
 5）
? Where do you prefer placing config for Babel, ESLint, etc.?
  In dedicated config files
> In package.json
          
 6）
? Save this as a preset for future projects? (y/N) n
  

删除
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
替换成
<router-view></router-view>
删除
import HelloWorld from './components/HelloWorld.vue'
HelloWorld

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

<script>

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

npm install vue-router@3.1.3 --save-dev

import router from './router'
router,

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

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

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/HelloWorld'
Vue.use(Router)

// eslint-disable-next-line no-unused-vars
let router;
export default router = new Router({
    routes: [
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        },
     
    ]
})

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

module.exports={
    devServer:{
        port: 8888,  //配置前端的端口号
        proxy:{
            '/api':{
                target:'http://127.0.0.1:8087',  //后端的请求的前缀路径
                changeOrigin:'true',
                pathRewrite :{  //把api开发的替换成 / 然后在请求后端
                    '^/api':'/'
                }
            }
        }
    },
    lintOnSave: false
}

npm install axios --save

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

// eslint-disable-next-line no-unused-vars
import axios from "axios";
axios.defaults.baseURL="http://localhost:8011/"
Vue.prototype.axios = axios

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

npm run serve

npm install element-ui --save

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

// eslint-disable-next-line no-unused-vars
import axios from "axios";
axios.defaults.baseURL="http://localhost:8011/"
Vue.prototype.axios = axios

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

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

// file:request.js
// 1、引入axios库
import axios from "axios"

// 2、创建axios实例
const service = axios.create({
    baseURL: '/api',  // api的base_url
    timeout: 5000  // 请求超时时间
})

// 3、请求拦截器
service.interceptors.request.use(
    config => {
        console.log("request url="+config.url)

        // 获取token，如果有token，就放入http的请求头里面
        let token = window.sessionStorage.getItem("token")
        if(token) {
            config.headers = {
                'token': token
            }
        }

        return config
    },
    error => {
        return Promise.reject(error)
    }
)

// 4、响应拦截器
service.interceptors.response.use(
    response => {
        // 定时刷新token
        console.log(response.data)
        return response
    },
    error => {
        return Promise.reject(error)
    }
)

export default service

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

<router-link :to="{path:'/'}">to home</router-link>
<router-link :to="{path:'/two'}">to home</router-link>

<router-link to="/goods">跳转到goods</router-link>

<router-link :to="{path:'/goods', param:{color:'yellow'}}">跳转到带参数的show</router-link>

npm install axios --save

import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
 
Vue.use(VueAxios, axios) 

// 设置url地址
axios.defaults.baseURL="http://localhost:8011/"

import './utils/axios'

this.$http.post( 'http://c.biancheng.net/',
          {
            documentUrl: 12
          }).then(res => {
            this.$router.push("/")
          console.log(res)
        }).catch(res => {
          console.log(res)
        })

//request拦截器 添加一个请求拦截器  
axios.interceptors.request.use(function (config) {
	let token = window.localStorage.getItem("token")
	if (token) {
  	// 设置请求头
	 config.headers.common['Authorization'] = token
	}
	return config
}, function (error) {
	//如果请求出错在此执行某些操作
	return Promise.reject(error);
});

// 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
	//登录超时
	if(response.data.code==400){
		this.$router.push('/')
	}
	return response;
}, function (error) {
	return Promise.reject(error);

npm install vue2-editor

import Vue from "vue";
import Vue2Editor from "vue2-editor";

Vue.use(Vue2Editor);

<template>
  <vue-editor v-model="content" />
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: { VueEditor },

  data: () => ({
    content: "<h1>Some initial content</h1>"
  })
};
</script>