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上开发