vue-cil3搭建项目

一、创建项目

1.vue create vuedemo01

2.cd vuedemo01

3.npm run serve

二、安装及配置路由

1.安装路由

npm install vue-router --save

2.src目录下新建router文件夹>index.js

import Vue from "vue"
import Router from "vue-router"

Vue.use(Router)

export default new Router({
	routes:[]
})

3.在main.js中引入router/index.js

4.使用

①添加页面views/login.vue

②router>index.js中添加路由配置 

 ③添加到路由到App.js

 然后就可以访问了。

三、安装axios及配置请求环境

1.安装axios

npm install axios --save

2.配置请求环境

①新建文件

②http.js

import axios from 'axios'
import router from '@/router/index'
import { Notification } from 'element-ui'
if(process.env.NODE_ENV === 'development'){     //开发环境

    axios.defaults.baseURL="http://xxxxxxxx"

}else if(process.env.NODE_ENV === 'production'){    //生产环境
    axios.get("serverconfig.json").then((result)=>{
        axios.defaults.baseURL=result.data.baseURL;    //生产环境访问地址
    })
}

//设置请求超时
axios.defaults.timeout = 60000

//post请求头设置
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

// //响应的拦截
axios.interceptors.response.use(
    response => {
        if(response.status === 200){
            return Promise.resolve(response) 
        }else{
            return Promise.reject(response)
        }
    },
    //服务状态码不是200的情况
    error => {
        if(error.response.status){
            switch(error.response.status){
                case 404:
                // router.push('/notfounted')
                break
                default :Notification.error({
                    title:"错误",
                    Message:"服务器错误，或网络错误",
                    offset:100,
                    duration:1500
                })
            }
            return Promise.reject(error.response)
        }
    }
)

//get方法的封装
export function get(url,params){
    return new Promise((resolve,reject)=>{
        axios.get(url,params).then(res=>{
            resolve(res.data)
        }).catch(err=>{
            reject(err.data)
        })
    })
}

//post方法封装
export function post(url,params){
    return new Promise((resolve,reject)=>{
        axios.post(url,params).then(res=>{
            resolve(res.data)
        }).catch(err=>{
            reject(err.data)
        })
    })
}

③api.js

import axios from 'axios'
import {get,post} from './http'    //引入封装的get，post方法  http.js
axios.prototype.get=get
axios.prototype.post=post
export default{
    
}

④server.js

//将API注册到Vue的原型中
import Vue from 'vue'
import API from './api'    //引入api.js
Vue.prototype.axios = API     //api挂载到vue的原型上

⑤在main.js中引入

import  './api/server'

⑥使用

遇到一个问题

解决方式

第一种：如果你是使用vue-clii3以上版本，打开你的.eslintrc.js文件，在rule中添加：

"no-unused-vars": 'off'

第二种：在package.json文件内加入如下代码：然后保存重启项目。

"rules": {
	"generator-star-spacing": "off",
	"no-tabs":"off",
	"no-unused-vars":"off",
	"no-console":"off",
	"no-irregular-whitespace":"off",
	"no-debugger": "off"
},

四、配置外部打包文件并解决跨域问题

新建一个vue.config.js文件

// 让打包的时候输出可配置的文件
let GenerateAssetPlugin = require('generate-asset-webpack-plugin'); 
let createServerConfig = function(params){
	let oApi = {
        baseURL: "",
	};
	return JSON.stringify(oApi);
}

module.exports = {
    /* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */
    /* baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' */
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    /* 输出文件目录：在npm run build时，生成文件的目录名称 */
    outputDir: 'dist',
    /* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
    assetsDir: "assets",
    /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
    productionSourceMap: false,
    /* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
    filenameHashing: false,
    /* 代码保存时进行eslint检测 */
    lintOnSave: false,
    /* webpack-dev-server 相关配置 */
    devServer: {
        /* 自动打开浏览器 */
        open: false,
        /* 设置为0.0.0.0则所有的地址均能访问 */
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: {
            '/api': {
                target: '', //后端地址
                secure: false,  // 如果是https接口，需要配置这个参数
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
    // 让打包的时候输出可配置的文件
    configureWebpack: {
        plugins: [
            new GenerateAssetPlugin({
                filename: 'serverconfig.json',
                fn: (compilation, cb) => {
                    cb(null, createServerConfig(compilation));
                },
                extraFiles: []
            }),
        ]
      }
  }

五、安装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)