从0开始布置vue3项目工程

1：首先 查看node 版本

node -v

 

 

npm install stable

 

 

　3:初始化 vitejs　然后就会叫你选择  语言直接选 vue-ts   然后cd  进入项目 初始化即可

 npm init  @vitejs/app   项目名称：vite-vue3-ts

 

 cd  vite-vue3-ts

npm install

npm run dev

 

 

 打开成功这个页面就说明成功了

　4：打开项目 打开 vite-config.ts 文件，修改指向目录

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
console.log(resolve,'resolve')
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
    }
  },
  base: './', // 设置打包路径
  server: {
    port: 4000, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    cors: true, // 允许跨域
    // 设置代理，根据我们项目实际情况配置
    proxy: {
      '/api': {  
        target: 'http://xxx.xxx.xxx.xxx:8000',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace('/api/', '/')
      }
    }
  }
})

5：项目的结构

src
 |- assets   //静态文件目录
 |- common   //通用组件类库
 |- components   //公共组件类库
 |- plugins          // element -plus  UI 文件夹（我习惯这样写）
 |- router         //路由配置
 |- store         //状态管理
 |- utils         //工具函数目录
 |- views       //页面组件
 |- App.vue
 |-main.ts  

6： 安装vue3支持的路由

npm i vue-router@4

1：创建src/router/index.ts 文件

 └── src/
     ├── router/
         ├── index.ts  // 路由配置文件

2打开 index.ts

import {
    createRouter,
    createWebHashHistory,
    RouteRecordRaw
  } from 'vue-router'
  const routes:Array<RouteRecordRaw>=[
      {
          path:'/',
          name: 'Login',
          component: ()=>import('@/views/userLogin/login.vue')  //懒加载引进来
      }
  ]
  const router = createRouter({
    history: createWebHashHistory(),
    routes
  })
  export default router

 4：安装 axios

 npm i axios

1:在 utils/https.ts 新增文件

 
 

import Axios from 'axios'
import { ElMessage } from 'element-plus'
const baseURL = 'https://api.github.com'
const axios = Axios.create({
  baseURL,
  timeout: 20000 // 请求超时 20s
})
// 前置拦截器（发起请求之前的拦截）
axios.interceptors.request.use(
  (response) => {
    /**
     * 根据你的项目实际情况来对 config 做处理
     * 这里对 config 不做任何处理，直接返回
     */
    return response
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 后置拦截器（获取到响应时的拦截）
axios.interceptors.response.use(
  (response) => {
    /**
     * 根据你的项目实际情况来对 response 和 error 做处理
     * 这里对 response 和 error 不做任何处理，直接返回
     */
    return response
  },
  (error) => {
    if (error.response && error.response.data) {
      const code = error.response.status
      const msg = error.response.data.message
      ElMessage.error(`Code: ${code}, Message: ${msg}`)
      console.error(`[Axios Error]`, error.response)
    } else {
      ElMessage.error(`${error}`)
    }
    return Promise.reject(error)
  }
)

export default axios

 

5：　安装vue3支持的状态管理 （vuex）

npm i vuex@next

1：创建 src/store/index.ts 文件

store/
   |-index.ts  //文件入口配置文件
   |-getters.ts
   |-modules/    //状态管理的一些 常用的放法函数
　　　　　|-user.ts    //登录的时候所做的操作 保存用户名 token等　
   |-mutation-types.ts

　2：下面就是index.ts 文件内容

import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'
 export default  new Vuex.Store({
    modules: {
        user,
      },
      state: {
            fileUrl: null
      },
      mutations: {
    
      },
      actions: {
    
      },
      getters:getters
 })

6： 安装支持 Vue3 的 UI 框架 Element Plus

npm i element-plus

　1:然后在 src/plugins/element.ts  

   

  src/
   |-plugins/
          |-element.ts

　引进来UI

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

export default (app: any) => {
  app.use(ElementPlus)
}

　7：上面的都做好之后，就在main.ts 引进来挂起

 

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'
import installElementPlus  from './plugins/element'
const app = createApp(App);
installElementPlus(app)
import  Https  from './utils/https'
app.use(
    router,
    store,
    installElementPlus,
    Https
    ).
mount('#app')

 

　然后用一下这个UI

<el-button type="primary">el-button</el-button>

 

 

 

 

 

　9：到这里就可以开发项目了。vue3的基本框架就搭好了