vue項目搭建過程

vue項目搭建過程

想用vue3+ts給本身搭一個網站
由於以前歷來沒有作過項目搭建的工做，因此想記錄一下這個搭建過程

構建vue運行環境

這個很簡單了，安裝git，下載node，改npm源什麼的

查看npm源
npm get registry
修改npm源
npm config set registry https://registry.npm.taobao.org

使用vue-cli建立一個vue項目

找個文件夾而後...

npm install -g @vue/cli

vue create 你的項目名稱

而後出現了一堆選項，按需選擇就行了

豐富vue的項目文件結構

• styles文件夾-->用來存放scss或css樣式文件

  variables.scss --> 用來定義全局scss變量
  main.scss --> 用來控制頁面結構

• common文件夾-->用來存放公用的js

  utils.js --> 經常使用工具類
  request.js --> 封裝請求庫(axios)

• api文件夾-->存放接口請求

• assets文件夾

  新建images存放圖片

刪除項目創建時的初始文件

components/HolloWord.vue什麼的，通通刪掉
初始化App.vue代碼

安裝一些依賴項

初始化瀏覽器樣式
npm install normalize.css
Element-plus組件庫
npm install element-plus --save

而後再main.ts裏引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import 'normalize.css'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

引入全局scss變量

根目錄下面新建vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "~@/styles/variables.scss";`
      }
    }
  }
}

創建Git倉庫

我是再gitee上新建了倉庫，本身的帳號裏配置ssh密鑰

git remote add origin 項目地址

建立dev分支，而後把項目推上去就行了 日常就在dev上開發