VueCli3项目文档使用

VueCli3项目使用

一、创建项目

1.方法一：vite创建

npm create vite@latest //安装命令

2.方法二:vue-cli创建

1.vue create vue3-project //安装命令

2.npm init vue@latest //安装命令

创建时版本太低,升级版本

npm uninstall -g vue-cli //卸载
npm install -g @vue/cli //下载

项目设置;执行命令

npm install //node_modules
npm run dev //启动 运行
npm run build //当你准备将应用发布到生产环境时，运行

项目安装依赖:

npm install axios -S
npm install echarts -S
npm install element-plus -S
npm install vant -S
npm install less -S
npm install sass -S
npm install normalize.css -S
npm install @element-plus/icons-vue //Eelemtn-plus 图标;下载依赖后引入

可以使用NPM或Yarn移除它：npm uninstall vant 或 yarn remove vant

清除依赖:

del node_modules //清理依赖包
npm cache clear --force//强制清理依赖

二、项目目录

#目录
    node_modules -- 所有的项目依赖包都放在这个目录下
    public -- 公共文件夹
    favicon.ico -- 网站的显示图标
    index.html -- 入口的html文件
    src -- 源文件目录，编写的代码基本都在这个目录下
    assets -- 放置静态文件的目录，比如logo.pn就放在这里
    components -- Vue的组件文件，自定义的组件都会放到这
    App.vue -- 根组件，这个在Vue2中也有
    main.ts -- 入口文件，因为采用了TypeScript所以是ts结尾
    shims-vue.d.ts -- 类文件(也叫定义文件)，因为.vue结尾的文件在ts中不认可，所以要有定义文件
    browserslistrc -- 在不同前端工具之间公用目标浏览器和node版本的配置文件，作用是设置兼容性最低适配版本
    eslintrc.js -- Eslint的配置文件，不用作过多介绍
    gitignore -- 用来配置那些文件不上传到git的文件进行管理
    package.json -- 命令配置和包管理文件
    README.md -- 项目的说明文件，使用markdown语法进行编写
    tsconfig.json -- 关于TypoScript的配置文件
    yarn.lock -- 使用yarn后自动生成的文件，由Yarn管理，安装yarn包时的重要信息存储到yarn.lock文件中

三、框架网址:

vant:Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.A lightweight, customizable Vue UI library for mobile web apps.https://vant-contrib.gitee.io/vant/

element-plus:Element Plus - The world's most popular Vue 3 UI frameworkElement Plus, a Vue 3 based component library for developers, designers and product managershttps://doc-archive.element-plus.org/#/zh-CN

一个 Vue 3 UI 框架 | Element Plusa Vue 3 based component library for designers and developershttps://element-plus.gitee.io/zh-CN/

四、Element-ui

全局样式引入

main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
​
const app = createApp(App)
​
app.use(ElementPlus)
app.mount('#app')

按需导入

自动导入 unplugin-vue-components 和unplugin-auto-import两款插件

npm install -D unplugin-vue-components unplugin-auto-import

1.使用 vite 按需加载样式

如果你使用 vite 作为构建打包工具，那么你需要先安装 vite-plugin-element-plus 来实现按需加载样式

yarn add vite-plugin-element-plus -D
# 或
npm install vite-plugin-element-plus -D

然后将如下代码添加至 vite.config.js 文件中:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VitePluginElementPlus from 'vite-plugin-element-plus'
​
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  return {
    plugins: [
      vue(),
      VitePluginElementPlus({
        // 如果你需要使用 [component name].scss 源文件，你需要把下面的注释取消掉。
        // 对于所有的 API 你可以参考 https://github.com/element-plus/vite-plugin-element-plus
        // 的文档注释
        // useSource: true
        format: mode === 'development' ? 'esm' : 'cjs',
      }),
    ],
  }
})

2.使用 webpack 按需加载样式

如果你使用 webpack 作为构建打包工具，那么你需要先安装 babel-plugin-import 来实现按需加载样式

yarn add babel-plugin-import -D
# 或
npm install babel-plugin-import -D

然后你需要将以下代码加入你的 babel.config.js 文件中。

babel.config.js

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'element-plus',
        // 引入组件
        customName: (name) => {
          name = name.slice(3)
          return `element-plus/lib/components/${name}`
        },
        // 引入样式
        customStyleName: (name) => {
          name = name.slice(3)
          // 如果你需要引入 [name].scss 文件，你需要用下面这行
          // return `element-plus/lib/components/${name}/style`
          // 引入 [name].css
          return `element-plus/lib/components/${name}/style/css`
        },
      },
    ],
  ],
}

3.webpack.config.js引入

五、创建组件，配置路由

App.vue

<router-view></router-view> //出口

子组件出口

配置路由例子：

import { createRouter, createWebHistory } from 'vue-router'
import Layout from "@/views/layout/Index.vue";
//登录
import Login from "@/views/Login/Index.vue";
//首页
import Home from "@/views/Home/Index.vue";
​
// import Admin from "@/views/Admin/Index.vue"
//管理员个人中心——列表
const Admin = () =>import('@/views/admin/Index.vue')
const List = () =>import('@/views/admin/list/Index.vue')
const Category = () =>import('@/views/admin/category/Index.vue')
......
......
​
​
const Utilities = () =>import('@/views/utilities/Index.vue')
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component:Layout,
      children:[
        {
          path:'/',
          name:'home',
          component:Home
        },
        {
          path:'/admin',
          name:'admin',
          component:Admin,
          children:[
            {
              path:'list',//访问路径 admin/list
              name:'list',
              component:List
            },
            {
              path:'category',//访问路径 admin/category
              name:'category',
              component:Category
            }
          ]
        },
        {
          path: '/supervisor',
          name: 'supervisor',
          component: Supervisor
        },
      ]
    },
     {
      path: '/login',
      name: 'login',
      component:Login
      // component: () => import('../views/AboutView.vue')
    }
  ]
})
​
export default router

vue3的生命周期

1.什么是生命周期？

vue是组件化开发，一个组件从诞生到消亡的过程就是组建的生命周期。

生命后期和人的出生到死亡是一样的，不同时期可以做不同的事情，就是这样的道理

2.vue2和vue3的生命周期对比

vue2的beforeCreate和create变成了setup

vue2的destroyed和beforDestroy变成了onUnmounted:尤大的解释是Unmounted更加语义化，卸载的意思比vue2的销毁更加形象

除了setup外大部分还是vue2的名字，只是在前面加了个on