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文件中
三、框架网址:
四、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