vue项目的创建命令选取&ESLint的安装命令选取

Vue项目创建命令选取

    1.输入vue create 项目名  //小写

    2.等待跳出选项, 选择    //手动选择功能

        Manually select features
        
    3. 勾选 Babel, Router, Vuex, Linter/Formatter

    4.选择2.X

    5.Use history mode for router? 输入 N

    6.Pick a linter/formatter config 选择 ESLint + Prettier(最下面的)

    7.Pick a additional lint features 选择 Lint on save

    8.where do you prefer placing config for Babel, ESLint, etc?
        
        选择  In package.json
        
    9.Save this as a preset for future projects? (y/n)
            
            这个是是否保存为预设, 输入n
            

ESLint安装命令选取:
                
    1. 输入 npx eslint --init
    
    2.    How would you like to use ESLint? 选择2 to Check syntax and find problems
    
    3.what type moduels does your project use? 选择1 Javascript moduels(import and export)
    
    4.which framework does your project use? 选择 VUE
    
    5.Does your project use Typescript? 选择 NO
    
    6.where does your code run? 选择 Brower
    
    7.what format do you want config file to be in? 选择 Javascript
    
    8.would you like to install them now with npm? 选择 Yes
    
    
    
3.之后在vue.config.js里面配置代理服务器proxy
    
    在module.exports = defineConfig({
    
    })当中添加
    
        devServer: {
         proxy: {
          '/api': {
          //匹配所有以 '/api'开头的请求路径
          target:'http://localhost:8081', //代理目标的基础路径 真实请求路径
          changeOrigin: true,
          pathRewrite: {'^/api':''},
          } 
         }
        }
      
    配置改变需要重启才能生效

4.安装axios
    
    npm install axios
    
    直到控制台提示 add 6 packages in S
    
    如果报错可以使用强制安装
    
    npm install axios --force

    
5.安装elementUi
        
    npm i element-ui -S

    分为全局注册, 按需注册

完整引入
在 main.js 中写入以下内容：    

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

    Vue.use(ElementUI);

6.在src目录下新建utils文件夹
            新建request.js
            
------------------------------------------------------------------------------------------------------

import axios from 'axios'

const request = axios.create({
  baseURL: 'http://localhost:8080/api',
  timeout: 8000,
})
// request拦截器
// 可以自请求发送请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(
  config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8'
    const token = localStorage.getItem('Authorization')
      ? localStorage.getItem('Authorization')
      : null
    if (token) {
      config.headers.Authorization = token // 设置请求头
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// responese拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
  response => {
    let res = response.data
    // 如果是返回的文件
    if (response.config.responseType === 'blob') {
      return res
    }
    // 兼容服务端返回的字符串数据
    if (typeof res === 'string') {
      res = res ? JSON.parse(res) : res
    }
    // 当权限不通过时给出提示
    return res
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

export default request
            

7.在src目录下新建api文件夹
            新建login.js
------------------------------------------------------------------------------------

import request from '@/utils/request'
//注册方法
export function register(smbmsUser) {
    return request({
      url: '/user/register/',
      method: 'post',
      data: smbmsUser,
    })
  }
  
  // 登录方法
  export function login(username, password) {
    return request({
      url: '/user/login',  //http://localhost:8080/api/user/login
      method: 'post',
      params: {
        username,
        password,
      },
    })
  }            

8.在views文件夹下新建MyLogin.vue

9.添加组件到路由
    导入MyLogin.vue