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/clivue 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.cssElement-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上开发