其他分享
首页 > 其他分享> > 通过Vue-cli4搭建vue+element UI项目

通过Vue-cli4搭建vue+element UI项目

作者:互联网

Vue cli3是一个交互式的项目脚手架。通过vue create可以快速搭建一个新项目,它包含了加载其它CLI插件的核心服务,并且提供了一个针对绝大部分应用优化过的内部的webpack配置,项目内部的vue-cli-service 命令,提供 servebuildinspect 命令。

vue/cli4+elementUi项目的搭建

  1. node版本要求Node>=8.9,运行npm install @vue/cli -g命令,安装vue-cli

  2. 运行vue create projectName,创建vue项目,projectName是项目名

    vue-cli3支持Prompt(问询),根据询问内容最终生成项目

    选择手动配置还是默认配置,这里选择Manually select features(手动配置)

  1.PNG

选择项目需要添加的插件

Babel:将ES6编译ES5 Router:支持vue-router

Vuex:支持vuex CSS Pre-processors:支持css预处理器

Linter/Formatter:支持代码风格检查和格式化


  2.PNG

添加CSS Pre-processors后,需要选择CSS预处理器

  3.PNG

是否使用路由的history模式

选择hash模式,也是默认模式,通过修改#号之后的值改变页面路由,打包之后可以放到服务器之后可以直接使用。history模式服务器需要做额外的设置。

  4.PNG

Eslint代码验证规则


  5.PNG

选择在什么阶段进行代码检测:选择保存时检测,可以实时修改,不必等到提交时修改

  6.PNG

Babel,Eslint等插件的配置信息,放在一个独立的文件下

  7.PNG
  1. vue-cli引入Element组件

    Element为vue-cli提供了Element插件,vue add element

  2. ajax请求

首先,需要配置环境变量

.env.development

# 开发环境
NODE_ENV='development'
VUE_APP_HTTP_HEADER={}
VUE_APP_HTTP_BASE_URL=''
VUE_APP_HTTP_NOAUTH_BASE_URL=''

.env.test

# 测试环境
NODE_ENV='production'
VUE_APP_DEBUG='false'
VUE_APP_HTTP_HEADER={}
VUE_APP_HTTP_BASE_URL=''
VUE_APP_HTTP_NOAUTH_BASE_URL=''

.env.production

# 生产环境
NODE_ENV='production'
VUE_APP_DEBUG='false'
VUE_APP_HTTP_HEADER={}
VUE_APP_HTTP_BASE_URL=''
VUE_APP_HTTP_NOAUTH_BASE_URL=''

axios配置

import axios from 'axios'
import { requestBefore, requestError, responseAfter, responseError } from './interceptors'

const http = axios.create({
  baseURL: process.env.VUE_APP_HTTP_BASE_URL, // 
  timeout: 10000, // axios请求超时时间设置
})

// 对所有axios请求信息和返回信息进行统一处理
http.interceptors.request.use(requestBefore, requestError)
http.interceptors.response.use(responseAfter, responseError)

export default http
  1. mock数据的使用

    在public文件夹下建立mock文件夹,存储mock数据

    在vue.config.js中配置devServer

    devServer: {
        proxy: { // 本地代理
          '/api': { // 将axios请求转发到本地 获取mock数据
            target: 'http://localhost:8080', 
            changeOrigin: true,
            pathRewrite: {
              '^/api': '/mock'
            }
          }
        }
    },
    
  2. vue.config.js中chainWebpack配置

    chainWebpack: config => {
        config.resolve.alias
          .set("@", resolve("src"))
          .set("&", resolve("src/components"))
          .set("utils", resolve("src/utils"))
    },
    

    可以简化代码中引入其他文件的书写,减小出错率

    1. elslint配置文件
    module.exports = {
      root: true,
      env: {
        node: true, // node 环境及全局变量
        browser: true, // 浏览器环境及全局变量
        es6: true // es6环境及全局变量
      },
      plugins: ["vue"],
      extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
      parserOptions: {
        parser: "babel-eslint"
      },
      rules: {
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
      },
    };
    
  3. gitlab配置

    // 已存在代码文件夹
    Existing folder
    cd existing_folder
    git init
    git remote add origin url
    git add .
    git commit -m "Initial commit"
    git push -u origin master
    
    0人点赞   日记本    

作者:a095
链接:https://www.jianshu.com/p/76e3396a051f
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

标签:axios,cli4,VUE,HTTP,URL,APP,element,vue
来源: https://www.cnblogs.com/wl-blog/p/15043044.html