构建一个vue项目的安装流程

从0开始建一个vue项目

先在文件夹下用终端安装vite

• npm create vite@latest my-vue-app -- --template vue
  这个运行完先别急着用 先根据指引进行打开vite看能不能使用
  cd my-project
npm install
npm run dev

• 安装完vite后文件夹应该是这样的

  vue项目模板结构

• .vscode: 编辑器配置

• node_modules:依赖包

• public:vite开启的web服务器的静态资源目录

  • http://localhost:5173/

• src: 我们写源代码的位置

• .gitignore: git管理忽略文件

• index.html: 静态页面

  • 挂载 #app 元素
  • js的入口文件: src/main.js

• package.json: 项目信息

• package-lock.json: 版本锁定

• README.md: 说明文件，你可以自己写一些项目运行说明

• vite.config.js : vite的配置文件

安装vuex

• 安装: npm install vuex -S
• src里面创建 store 文件夹，里面创建index.js

import {createStore} from 'vuex'

export default createStore({
  state(){
    return {   
      // state函数return里面的数据就是：：：：所有组件可以共享的数据，是响应式的
      //注意： {{$store.state.tasks}}  这样在组件中使用tasks里面的值
     tasks:{
        {name:'吃饭',completed:true,id:1},
        {name:'睡觉',completed:false,id:2}
     }
    }
  },
  mutations:{
    //mutations里面写函数，这些函数用来修改state里面的数据
    // 里面的方法要求是同步的方法
    //更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
    // state:store的state选项返回的数据集合
    // payload:你传递的addTask的实参
    //注意：mutations里面的函数的调用方式：store.commit('addTask',传的参数)
    addTask(state,payload){
      state.tasks.push(payload)
    }
  },
  actions:{
    //Action 类似于 mutation，不同在于：
    //Action 提交的是 mutation，而不是直接变更状态。
    //Action 可以包含任意异步操作。
    addTaskAsync(state,payload){
        setTimeout(()=>{

        },2000)
    }
  },
  getter:{
    //getter类似计算属性，里面的变量都依赖state，只要state变化就会同步变化
    //注意：{{$store.getters.count}}  这样在组件里使用getter的值
    count(state){
        return state.tasks.filter(一系列操作)
    }
  }
})

导入Element Plus组件库

• 安装

npm install element-plus -S     安装组件库
npm install @element-plus/icons-vue -S   安装图标库

按需导入: 使用插件自动导入你使用的组件 - 推荐
+ 下载按需导入插件:npm install -D unplugin-vue-components unplugin-auto-import
+ 在vite.config.js添加配置按需要导入组件

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    })
  ],
})

// 注册所有图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

sass安装

• sass: css的预编译语言
  • vite预先配置好了css的预编译语言: sass,less
  • 我使用sass，sass有两种格式: sass,scss，我使用scss格式
  • 我只需要下载sass编译包就可以了:npm install sass -D
    • -D表示依赖只是开发时候需要
    • 记录在package.json的devDependencies里面
  • 然后在单文件组件的style里面添加lang='scss'启用

body{
  color:red;
}
h3{
  font-size:100px;
}

body{
  color:red;
  h3{
    font-size:100px;
  }
}

服务器代理配置

• 测试配置是否成功
• 安装axios: npm install axios -S
• 把其他资料里面的utils和apis复制到src中（注意修改其中的路径）
  • env:'development'

// vite.config.js
// 在配置里面添加
{
  server:{
    proxy:{
      // 字符串
      // '/admin':'http://121.89.205.189:3001/',
      // 对象语法
      '/admin':{
        target:'http://121.89.205.189:3001/',
        changeOrigin:true
      }
    }
  }
}

环境文件

• 项目根目录创建
  • .env.development 针对开发模式（npm run dev）
  • .env.production 针对生产模式（npm run build）
• 书写VITE_BASE_URL变量

# .env.development
VITE_BASE_URL=/admin

# .env.production
VITE_BASE_URL=http://121.89.205.189:3001/admin

• 获取这个变量值: import.meta.env.VITE_BASE_URL
  • 只有VITE_开头定义的变量会被暴露
• 测试：修改 utils/request.js

// 根据环境变量确定baseURL
// let baseURL = '';
// let env = 'development'; // development 开发(dev)  production 生产(prod)
// switch(env){
//   case 'development': baseURL = '/admin';break;
//   case 'production': baseURL = 'http://121.89.205.189:3001/admin';break;
// }

// 根据环境变量和模式(development,production)确定
let baseURL = import.meta.env.VITE_BASE_URL