操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

一、項目痛點 二、vite 自動構建工具

# npm 6.x
npm create vite@latest my-vue-app --template vue
# npm 7+
npm create vite@latest my-vue-app -- --template vue

三、常用命令 1.npm 下載 2.npm run dev啟動服務器

在開發環境啟動調試代碼服務器

3.npm run build打包生產

const express = require('express');
const app = express();
app.use(express.static('./public'))
app.listen(3001)

四、vue項目模板結構 src: 我們寫源代碼的位置.: git管理忽略文件index.html: 靜態頁面 .json: 項目信息-lock.json: 版本鎖定.md: 說明文件，你可以自己寫一些項目運行說明vite..js : vite的配置文件 五、項目中使用vuex 1.安裝npm i vuex -s

npm vuex -S

2.建src\store\index.js

src里面創建 store 文件夾，里面創建index.js

import {createStore} from 'vuex'
export default createStore({
  state(){
    return {   
      // 所有組件可以共享的狀態，是響應式的
      tasks:[
        {name:'吃飯',completed:true,id:1},
        {name:'睡覺',completed:false,id:2},
        {name:'打小報告',completed:false,id:3},
        {name:'寫代碼',completed:true,id:4},
      ]
    }
  },
  getters:{
    count(state){
      // return的數據就是使用count獲取的數據
      return state.tasks.filter(item=>!item.completed).length;
    }
  },
  mutations:{
    // 里面的方法要求是同步的方法
    addTask(state,payload){
      state.tasks.push(payload)
    }
  }
})

3.main.js導入

// 現在導入node_modules里面的包只要寫包名就可以了
import { createApp } from 'vue'
// 導入store,如果導入的是一個文件夾，其實導入的是這個文件夾里面的index.js
// 如果導入的是js文件，后綴名.js可以省略
import store from './store'
import App from './App.vue'
// 使用插件vuex
createApp(App).use(store).mount('#app')

六、在單文件組件setup頂層定義的變量按需創建子文檔，無需就可以在中使用在單文件組件setup頂層導入的組件按需創建子文檔，無需注冊，就可以在中使用 七、vite常用配置

import path from 'path'
// 在配置中添加下面內容
{
  resolve:{
    alias:{
      '@':path.resolve(__dirname,'src')
    }
  }
}

然后在單文件組件的style里面添加lang='scss’啟用

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

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

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

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

八、環境文件 書寫變量

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

測試：修改 utils/.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

九、-plus

npm install element-plus -S
npm install @element-plus/icons-vue -S

全局導入: 把所有組件和所有組件樣式都導入 - 不推薦

// main.js
// 注冊所有element-plus組件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
// 注冊所有圖標
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

按需導入: 使用插件自動導入你使用的組件 - 推薦

+ 下載按需導入插件:npm -D -vue- -auto-

+ 在vite..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()],
    })
  ],
})

手動導入需要的圖標