创建空的Vite前端项目demo步骤详解（js里的setup语法糖；css里的less预处理器）

一、启动项目
终端：npm init vite@latest，@latest使用最新版本的vite去构建；

Project name：输入项目名称；demo

Select a framework：选择所需要的框架；Vue

Select a variant：选择所需要的模板 （Customize with create-vue：自定义；Nuxt：发展中的服务端渲染框架，不想让前端的客户端渲染，可以实现在服务器端渲染后发给前端 ）；选Customize with create-vue

Add TypeScript：是否添加ts支持；Y

Add JSX Support：是否添加JSX支持（超文本语言的js支持，如原本js需要通过DOM来创建div元素：var newDiv = document.createElement(“div”); 而JSX支持可以实现在js里直接写div标签等，和html里一样去写，可以直接生成DOM对象）；N

Add Vue Router for Single Page Application development：是否添加Vue Router支持（router是访问不同页面时的不同路径 ）；Y

Add Pinia for state management：是否添加Pinia支持（Pinia是vuex的后续版本：中央状态管理器，如不同页面有同一个变量要去使用它，为避免同一个变量传来传去以及某个地方被改动，中央状态管理器里可以定义一些状态变量，状态变量是所以vue组件共有的，可以在任意页面调用状态变量最新的值）；Y

Add Vitest for Unit Testing：是否添加单元测试；N

Add an End-to-End Testing Soluiton：是否添加端对端的测试解决方案；N

Add ESLint for code quality：是否添加ESLint的语法检查器；N

这时候左侧目录里应该查看到被自动创建好的demo，根据提示去运行demo项目；

cd demo：通过cd命令进入demo项目；

npm install：安装项目所需要的依赖包；

npm run dev：启动项目；

二、完成以上配置后，接下来创建空白Vite项目；
1、因为项目是用less语法写的css，所以安装less预处理器：npm install less-loader less；

2、assets

①在src->assets->新建文件夹style->新建文件global.less（存放全局样式可以应用到所有的vue页面上）；

②在src->assets->style->新建文件reset.less来重置所有浏览器样式（所有的浏览器都有预制的样式，不同浏览器样式不一样，为保持不同浏览器的预制渲染出来尽可能统一）；

reset.less：

  /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
html,body{
	height:100%;
	width:100%;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a:link,
a:visited,
a:hover,
a:active{
  color: #fff;
  text-decoration: none;
}  

③剩下的全都删除；

3、vite.conifg.ts：添加css预处理器less进行配置；

css: {
    // css预处理器
    preprocessorOptions: {
      less: {
        charset: false,
        additionalData: '@import "./src/assets/style/global.less";',
      },
    },
  },

4、components下全删，之后里面存放所需要的组件，组件就是多个页面可以去调用它；

如：HomeView页面调用了组件TheWelcome，然后<TheWelcome />使用；

5、Vue Router
其中path: ‘/’,
​ name: ‘home’,
​ component: HomeView是根路径下渲染的是HomeView页面；

src->router->index.ts里的直接加载（打开根路径’/‘时就会加载组件，如果多会导致服务器压力大，加载慢）与懒加载（如只有访问到具体的’/about’才会加载）；（直接加载：如：import HomeView from ‘…’，以及component：HomeView；懒加载：没有import，以及component：（）=>import（‘…’））

删除第二个about只留根路径；

6、stores
src->stores：删除原本的关于Pinia预制文件counter.ts，新建index.ts编写所需要的文件；

// 想要使用必须先引入 defineStore；
import { defineStore } from 'pinia';
// 这里我们使用的是es6 的模块化规范进行导出的。

// defineStore 方法有两个参数，第一个参数是模块化名字（也就相当于身份证一样，不能重复）

// 第二个参数是选项，对象里面有三个属性，相比于vuex 少了一个 mutations.

export const useMainStore = defineStore('main', {
​    state(){  // 存放的就是模块的变量
​        return {
​            }
​        },
​    getters:{ // 相当于vue里面的计算属性，可以缓存数据
​    },

​    actions:{ // 可以通过actions 方法，改变 state 里面的值。
​    }
})

7、views
src->views->AboutView.vue：删除AboutView.vue；
src->views->HomeView.vue：

8、APP.vue：所有页面的入口，所有页面都是在App.vue里渲染的；
RouterView是Vue Router的组件，<RouterView />会把router->index.ts里HomeView渲染到标签位置；
因为RouterView是router里的内容所以需要import引入进来；

9、main.ts：是vue项目入口文件；
import引入一些文件；
createAPP创建app对象；
app.use加载一些组件；
app.mount渲染vue内容，在index.html里找id为app的DOM元素；
因为之前写了reset.less重置样式的文件，此处需要引入进来；
index.html 所有vue内容渲染在<div id="app"></div>标签里

嵌套关系：
Vue的入口文件main.ts里app.mount(‘#app’)使用app.mount渲染app内容，主要是通过id为app的DOM元素，在index.html里

的div标签里包裹来渲染App.vue页面，App.vue把HomeView.vue渲染进来，一种嵌套关系；

此时，npm run dev，会得到新的空白页面；

其中lang就是相当于后缀，比如js.ts；style.less；如果不写lang就是默认js.js；style.css；
1、js里的setup语法糖：setup语法糖是vue3.2后加入的；
不使用setup：data里的数据和方法采用组合式；

使用setup：data里数据分离开到对应用到的方法里；

2、css里的less预处理器：主要是可以实现嵌套写样式；（其中scoped是保证当前页面样式的独立，就是当前页面的css定义的样式只对当前页面管用，不会在其他页面起作用）
不使用less:

使用less：