目录
- 一、 基于vue-cli 脚手架
- 二、基于vite 推荐
- 2.1 介绍
- 2.2 创建项目
- 2.3 文件介绍
- 2.3.1 extensions.json
- 2.3.2 脚手架的根目录
- 2.3.3 主要文件 src
- 2.3.3.1 main.js
- 2.3.3.2 App.vue 组件
- 2.3.3.3 conponents
- 2.3.4 env.d.ts
- 2.3.5 index.html 入口文件
- 2.3.6 package
- 2.3.7 tsconfig
- 2.3.8 vite.config.js
一、 基于vue-cli 脚手架
目前vue-cli已处于维护模式，官方推荐基于Vite创建项目
r## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 执行创建命令
vue create vue_test
## 随后选择3.x
## Choose a version of Vue.js that you want to start the project with (Use arrow keys)
## > 3.x
## 2.x
## 启动
cd vue_test
npm run serve
二、基于vite 推荐
2.1 介绍
vite 是新一代前端构建工具，官网地址：https://vitejs.cn，vite的优势如下：
- 轻量快速的热重载（
HMR），能实现极速的服务启动。 - 对
TypeScript、JSX、CSS等支持开箱即用。 - 真正的按需编译，不再等待整个应用编译完成。
webpack构建 与vite构建对比图如下：
webpack构建如下所示
从entry入口文件进来，先route路由对module每一个都分析，分析完成后进行一个Bundle处理，吃力完成之后Server ready 工程启动了
从route到module的过程是很耗时的
如果用webpack架构的时候，当路由和模块特别多的时候，启动项目就会非常的慢
vite构建如下图所示
一上来就Server ready项目就启动，那什么就没准备好就启动么？ 其实是我们看哪个，它就会准备哪个
我们不看的路由和模块，就不会进行处理
有点懒加载的意思
2.2 创建项目
官方文档：https://cn.vuejs.org/guide/quick-start#creating-a-vue-application
## 1.创建命令
npm create vue@latest
## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript? Yes
## 是否添加JSX支持
√ Add JSX Support? No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development? No
## 是否添加pinia环境
√ Add Pinia for state management? No
## 是否添加单元测试
√ Add Vitest for Unit Testing? No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality? Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting? No
2.3 文件介绍
2.3.1 extensions.json
在这个文件中配置着各种各样的插件
2.3.2 脚手架的根目录
2.3.3 主要文件 src
2.3.3.1 main.js
// 样式内容
import './assets/main.css'
// 下面这三行的内容比较重要
// 创建应用 相当于种花时候的花盆
import { createApp } from 'vue'
// App组件 相当于花的根
import App from './App.vue'
// App组件是所有组件的根 组件 将花插在花盆里
// mount是挂载的意思，挂载到app的容器里面，app容器在index.html文件里<div id="app"></div>
createApp(App).mount('#app')
此文件在入口文件index.html中通过如下代码被引入
<script type="module" src="/src/main.js"></script>
2.3.3.2 App.vue 组件
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>
<template>
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
</div>
</header>
<main>
<TheWelcome />
</main>
</template>
<style scoped>
header {
line-height: 1.5;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
}
</style>
2.3.3.3 conponents
里面会存放很多的组件，这里其实就是树枝，App.vue是根
2.3.4 env.d.ts
不要把这个文件删除，如果没有node_modules文件夹的话，意味着没有依赖，这个文件就会飘红
飘红的我们是我们直接执行 ”npm i“，安装所有的依赖
如果我们直接向文件引入“.jpg”、“.txt”文件，ts会不认识的
env.d.ts文件的作用就是让ts认识这些文件，当我们加上图片中的代码后，我们的引用就不会飘红
2.3.5 index.html 入口文件
如果我们目前新项目的src目录中的内容都不动的话，我们的页面仅仅会呈现index.html文件中的内容
在这个文件中做了一个非常重要的事情，将"/src/main.js"引入了
<script type="module" src="/src/main.js"></script>
2.3.6 package
包的管理文件，依赖声明文件
2.3.7 tsconfig
ts的配置文件，不能删除
2.3.8 vite.config.js
这是整个工程的配置文件
可以安装插件、配置代理
