vue-cli 3+ 脚手架创建项目_创建vue3脚手架项目-CSDN博客

本文链接：https://blog.csdn.net/popstarqq/article/details/121792865

1 全局安装脚手架

npm install -g @vue/cli

查看版本

$ vue --version
@vue/cli 4.5.15

2 创建项目

官方地址:创建一个项目 | Vue CLI

选择默认的Vue2方式；回车后，稍等片刻，安装完成

完成之后的目录结构如下:

运行 npm run serve启动项目；默认在8080端口启动

3 vue.config.js配置

新建的项目没有该文件，需要我们自己创建；详细配置见配置参考 | Vue CLI

在根目录新建vue.config.js，然后新建一个空对象

// vue.config.js
module.exports={

}

3.1 publicPath

配置网站根路径，如果是开发环境，则在端口号之后不加路径，如果是开发打包环境会自动加上transit-authority才可访问；NODE_ENV变量是内置在环境变量的，暂时不需要额外配置

    // 网站访问根路径
    publicPath:process.env.NODE_ENV==="development"
    ?"/":"/transit-authority/",

3.2 devServer

本地服务相关配置对象；所有 webpack-dev-server 的选项都支持；详细配置见DevServer | webpack

先简单配个端口号:

    // 本地服务配置
    devServer:{
        // 端口号配置
        port:8090
    }

现在的目录和vue.config.js如下所示:

3.3 lintOnSave

配置是否开启eslint检查，如果设置为FALSE，在修改代码并ctrl+s保存后，是不会执行eslit检查的

// vue.config.js
module.exports={
    // 网站访问根路径
    publicPath:process.env.NODE_ENV==="development"
    ?"/":"/transit-authority/",
    // 本地服务配置
    devServer:{
        // 端口号配置
        port:8090,
    },
    lintOnSave: false
}

3.4 配置proxy(跨域)

项目启动后，二级目录是api的接口都会被代理到指定的target地址；

    // 本地服务配置
    devServer:{
        // 端口号配置
        port:8090,
        // 跨域配置
        proxy: {
            '^/api/': {
              target: 'http://localhost:8060',
              changeOrigin: true
            }
        }
    },

3.5 配置打包文件夹

配置文件夹名称

    // 打包后的文件夹名称
    outputDir: 'dist',

首页名称

    // 打包后的首页名称
    indexPath: 'index.html',

4 vue-router配置

4.1 安装vue-router

npm install vue-router

4.2 手动创建router文件

第一步:在src根目录路新建router文件夹，在其中创建index.js,键入如下内容

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: []
  });

export default router

第二步:在Vue中注册router

在main.js中引入并注册router对象

import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
Vue.config.productionTip = false

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

4.3 添加router-view标签

第一步:在app.vue中添加 <router-view />；这样在路由中的组件内容会被渲染到此处

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <router-view />
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

第二步：创建组件

如下创建一个demo1.vue组件

第三步:引入组件并设置路由

访问路由，效果如下

其他配置，后续增加即可

5 配置API文件夹

5.1 安装axios

npm install --save axios

5.2 在src目录下新建index.js文件

在index.js文件中写入接口信息；url在项目启动后会直接加上启动服务的ip地址；

import axios from 'axios'
function getInfo() {
    return axios({
      method: 'get',
      url: '/api/getnotice',
    })
  }
  
export { getInfo }

5.3 配置http

一般如果对请求有拦截等设置，可以新建一层http过度一下

新建一个httpInstance.js文件；

import axios from 'axios'
const http = axios.create({
    timeout: 20000,
    withCredentials: true,
    headers: { 'X-Requested-With': 'XMLHttpRequest' },
})


// 加拦截器
// 。。。
export default http

在index.js中使用

import http from './httpInstance'
function getInfo() {
    return http({
      method: 'get',
      url: '/api/getnotice',
    })
  }
  
export { getInfo }