从零创建完整的个人项目 （webapck+vue3+element vite+vue3+VantUI）

参考

webapck+vue3+element

安装node

安装Vue

npm install vue

安装vue-cli脚手架

npm i -g @vue/cli-init

建立项目文件夹，执行创建脚本

vue create projectname / vue init webpack projectname

• vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档。
• vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名

手动选择需要的插件 vuex、router、babel 、vue版本、Css预处理器 等等配置
——项目创建过程已经集成化了 很简单

创建完成后的项目结构

已包含可用的router和vuex插件 无需再次手动引入

引入element-UI

注意：新版3.x 暂时还不支持ElementUI，可改用element-plus
安装起来也很简单，进入到根目录，然后
vue add element-plus
其他与下方vue2.x一致

1.创建src/styles文件夹 创建ele-variables.scss文件 在其中控制element主题颜色 字体等

scss引入相对麻烦或也可以使用这种方法：改变主题

/* 改变主题色变量 */
$--color-primary: #60BB69;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

2.创建src/utils文件夹 创建element.js文件 在其中完整组件列表的引入方式element控件与整体样式控制

import {
    Button,
    Table,
    TableColumn,
    Select,
    Option,
    Input,
    Message,
    MessageBox,
    Menu,
    Submenu,
    MenuItemGroup,
    MenuItem,
    Dropdown,
    Switch,
    Header,
    Pagination,
    DropdownMenu,
    DropdownItem,
    Container,
    Card,
    Main,
    Aside,
    Breadcrumb,
    BreadcrumbItem,
    DatePicker,
    Radio,
    RadioGroup,
    Tag,
    Dialog,
    Checkbox,
    CheckboxGroup,
    CheckboxButton,
    Tabs,
    TabPane,
    Upload,
    Badge,
    Cascader,
    Carousel,
    CarouselItem,
    Loading,
    Tooltip
} from 'element-ui';

const element = {
    install : (Vue) => {
        Vue.use(Button),
        Vue.use(Table),
        Vue.use(TableColumn),
        Vue.use(Select),
        Vue.use(Option),
        Vue.use(Menu),
        Vue.use(MenuItem),
        Vue.use(MenuItemGroup),
        Vue.use(Submenu),
        Vue.use(Input),
        Vue.use(Header);
        Vue.use(Switch),
        Vue.use(Pagination),
        Vue.use(Main);
        Vue.use(Card);
        Vue.use(Dropdown),
        Vue.use(DropdownMenu),
        Vue.use(DropdownItem),
        Vue.use(Breadcrumb),
        Vue.use(BreadcrumbItem),
        Vue.use(Radio),
        Vue.use(Aside);
        Vue.use(DatePicker),
        Vue.use(RadioGroup),
        Vue.use(Tag),
        Vue.use(Dialog),
        Vue.use(Checkbox),
        Vue.use(CheckboxGroup),
        Vue.use(CheckboxButton),
        Vue.use(Tabs),
        Vue.use(TabPane),
        Vue.use(Upload),
        Vue.use(Container);
        Vue.use(Badge),
        Vue.use(Cascader),
        Vue.use(Carousel),
        Vue.use(CarouselItem),
        Vue.use(Loading),
        Vue.use(Tooltip),
        Vue.prototype.$message = Message;
        Vue.prototype.$alert = MessageBox.alert;
        Vue.prototype.$confirm = MessageBox.confirm;
    }
};

import '@styles/ele-variables.scss';

export default element;

3.在main.js入口文件中不直接引入element，

import element from ‘./utils/element’;

引入安装
自定义主题

配置less

Less则相对清晰明了,易于上手,对编译环境要求比较宽松。考虑到编译Sass要安装Ruby,而Ruby官网在国内访问不了,个人在实际开发中更倾向于选择Less。
less官网

webpack配置

使用脚手架创建的项目会内置webpack，可以创建vue.config来配置
理解webpack
理解webpack2
。。。

vue.config.js

官网
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

vue-cli-service理解

随vue-cli一起安装 ，写在package.json脚本中，被npm run命令执行后
1.获取package.json中的依赖——>
2.初始化相关插件(vue-cli-plugin-element-plus)——>
3.解析命令使用的模式(development、testing、production)——>
4.加载环境变量，加载用户配置，应用插件——>
5.启动服务(启动webpack-dev-server后，在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中​)

vite+vue3+VantUI

本地磁盘选择目录 powershell 使用Vite构建Vue3TS项目 再进行Git初始化git init

安装配置各种插件
npm i vant npm install vue-router npm install axios

其他 设置@路径别名 各种不识别 配置路由等问题不做详解自行百度即可
登录要考虑 密码的md5加密 多次登录的验证码 指定链接访问的重定向 登录后session的保存与请求头写入等
详细代码见gitee项目