vue项目创建以及基础项目使用

利用脚手架

1.创建一个文件夹到d盘文件名为vuetest

2.打开cmd，输入d:   进入d盘，输入cd vuetest  进入该文件夹，进入后执行vue create vue01创建一个叫vue01的项目。

一。安装element-ui

npm i element-ui -S 

在main.js文件下全局引入

import ElementUI from 'element-ui';

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

引入后使用   从Vue.use(ElementUI)

然后就可以复制element-ui的代码了。

   二.安装vue router 

vue2要安装3版本    vue3安装4版本

npm install vue-router@3

三。安装axios

npm install axios

在src文件夹下创建一个api文件夹，并在其api文件夹下创建index.js文件夹用做全局导出作用，在src文件夹下创建一个untils文件夹并在其下创建一个request.js文件用来封axios，主要是请求拦截器与响应拦截器，请求拦截器携带token

request.js中编写如下：

import axios from 'axios'

const request = axios.create({

timeout:5000

)

request.interceptors.request.use(config=>{

//请求拦截器

     const token = localStorage.getItem('token')

     if(token){

        config.headers["Authorization"] = token

     }

    return config

})

export default request

现在想要将src下的api下的index.js文件挂载到vue实例上，让全局都能看到

在main.js文件下引入文件  并挂载到vue原型上

import api from './api/index'

Vue.prototype.$api = api

四。初始化一个router文件夹用于存放路由信息

1.在src下创建一个router文件夹   然后再router下创建一个文件index.js文件  （里面要new一个且封装一个路由器）   在里面配置如下信息

import Vue from "vue"

import VueRouter from "vue-router"

Vue.use(VueRouter)

const routes=[]//定义一个空数组存储以后的路由信息，因为路由信息有很多所以复数

const router = new VueRouter({

    mode:'hash',//定义路由器模式为hash模式

    routes  //把路由信息放进来

})

export default router  //默认导出这个新建的路由器　　

 2.然后在main.js入口文件下引入这个路由器  并在newVue里面使用    （我觉得只要是vue生态的插件都不用Vue.use(),他们都是只要在new Vue（{}）里面注册使用就好了，而其他第三方组件库引入要用Vue.use()才能使用）

new Vue({

  router,//这里就是使用

  render: h => h(App),

}).$mount('#app')

五。做一个项目要配置前后端分离  那么就得配置代理解决跨域  在vue.config.js文件下配置如下（里面信息根据项目要求自行更改填写）

devServer:{

    proxy:{

      '/admin':{

        target:'http://127.0.0.1:8080'

      },

      "/upload":{

        target:'http://127.0.0.1:8080'

      }

    }

  }

六.注意 ：  普通组件公共组件等需要在其他应用的时候引入、注册、使用   ；而路由组件则在路由器封装那个文件夹中先引入路由组件，再在路由信息表中填path,compnent等信息将组件与路由路径相关联。并注意在使用路由组件的位置只需要<router-view></router-view>     也要注意 非嵌套路由必须包含首斜杠，检查后发现路由配置中path少了斜杠/