Create a complete personal project from scratch (webapck+vue3+element vite+vue3+VantUI)

reference

webapck+vue3+element

install node

Install Vue

npm install vue

Install vue-cli scaffolding

npm i -g @vue/cli-init

Create a project folder and execute the creation script

vue create projectname / vue init webpack projectname

• vue create is the initialization method of vue-cli3.x. Currently, the template is fixed, and the template options can be freely configured. The vue-cli3 project is created, which is different from the cue-cli2 project structure and configuration method. For specific configuration methods, refer to official documentation.
• Vue init is the initialization method of vue-cli2.x, you can use some templates on github to initialize the project, webpack is the officially recommended standard template name

Manually select the configuration of the required plugins vuex, router, babel, vue version, Css preprocessor, etc.
- the project creation process has been integrated and is very simple.

The project structure after creation

has already included the available router and vuex plugins, no need to manually introduce them again

Introducing element-UI

Note: The new version 3.x does not support ElementUI for the time being. You can use element-plus
to install it. It is also very simple to install. Enter the root directory, then
vue add element-plus
and others are consistent with vue2.x below

1. Create the src/styles folder and create the ele-variables.scss file in which to control the element theme color font, etc.

The introduction of scss is relatively troublesome or you can also use this method: change the theme

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

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

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

2. Create the src/utils folder and create the element.js file in which the complete component list is introduced. The element control and the overall style control

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. Do not directly introduce element in the main.js entry file,

import element from ‘./utils/element’;

Introduce install
custom themes

Configure less

Less is relatively clear, easy to use, and has relatively loose requirements for the compilation environment. Considering that you need to install Ruby to compile Sass, and the official Ruby website cannot be accessed in China, I prefer to choose Less in actual development.
less official website

webpack configuration

Projects created using scaffolding will have built-in webpack, and vue.config can be created to configure and
understand webpack
and understand webpack2
. . .

view.config.js

The official website
vue.config.js is an optional configuration file. If this file exists in the root directory of the project (similar to package.json), it will be automatically loaded by @vue/cli-service. You can also use the vue field in package.json, but note that this way of writing requires you to strictly follow the JSON format.

vue-cli-service understanding

Installed together with vue-cli, written in the package.json script, after being executed by the npm run command
1. Obtain dependencies in package.json ——>
2. Initialize related plug-ins (vue-cli-plugin-element-plus) — —>
3. Parse the mode used by the command (development, testing, production) —>
4. Load environment variables, load user configuration, apply plug-ins —>
5. Start the service (after starting webpack-dev-server, in the target file You can’t see the compiled files in the folder, and the real-time compiled files are all saved in the memory​)

vite+vue3+VantUI

Select the directory powershell on the local disk Use Vite to build the Vue3TS project and then perform Git initialization git init

Install and configure various plug-ins
npm i vant npm install vue-router npm install axios

Other settings@Path alias Various problems such as unrecognized configuration routing can be done without detailed explanation.
Login should consider the md5 encryption of the password. The verification code for multiple logins specifies the redirection of the link access. After login, the session is saved and the request header is written, etc. See the gitee project
for detailed code