开发环境
- 编辑器推荐： Visual Studio Code + Volar 扩展
- 检查node：vue3.0推荐node16以上
node -v //查看node版本号
npm -v //查看npm版本号- 创建项目：vue官方推荐使用vite创建
//Vue官方的项目脚手架工具
npm init vue@latest
//进入项目目录
cd vue-project（刚刚创建的文件名）
//npm安装必要依赖
npm install
//启动开发环境调试
npm run dev
//打包生产的文件
npm run build项目搭建
1.创建VUE应用 main.js
每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例
import { createApp } from 'vue'
const app = createApp({
/* 根组件选项 */
})- 创建跟组件 App.vue
我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。
App (root component)
├─ TodoList
│ └─ TodoItem
│ ├─ TodoDeleteButton
│ └─ TodoEditButton
└─ TodoFooter
├─ TodoClearButton
└─ TodoStatistics
App.vue
<template>
<!--这里是跟组件，其他组件内容会显示在这里的-->
<router-view/>
</template>- 挂载应用
index.html
应用实例必须在调用了 .mount() 方法后才会渲染出来。
index.html，跟组件App.vue会被挂载到这里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>e-library图书管理系统</title>
</head>
<body>
<div id="app">
<!--项目中跟组件的挂载点，App.vue组件会挂载到这里-->
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
Vue跟组件
import { createApp } from 'vue'
const app = createApp({
data() {
return {
count: 0
}
}
})
app.mount('#app')
- 组件之间关系
最终main.js和App.vue都会被挂载到index.html中
安装模块
- --save：将保存配置信息到pacjage.json的dependencies节点中。
- --save-dev：将保存配置信息到pacjage.json的devDependencies节点中。
- dependencies：运行时的依赖，发布后，即生产环境下还需要用的模块
- devDependencies：开发时的依赖。里面的模块是开发时用的，发布时用不到它。
注意：--save可以简写为-S，--dev可以简写为-D
//进入项目根目录
cd vue-project
npm install vue --save
//安装路由管理
npm install vue-router --save
//安装状态管理
npm install pinia --save
//安装css处理
npm install sass --save-dev
//安装网络请求
npm install axios --save
//安装访问进度条
npm install nprogress --save
//安装element-plus
npm install element-plus --save
//时间格式化组件
npm install moment --save
//安装vite支持
npm install vite --save-dev
npm install @vitejs/plugin-vue --save-dev
//如果不用element组件
//安装openTiny组件
npm install @opentiny/vue@3