vue3.2之边学边练（一）项目初始化

vue3.0的时候还是使用的webpack的打包工具，在3.2后尤大自己写了vite，随之项目的创建也有所改变，并且在vue风格模式也有了改变。

这个项目将边学边练，完成一个简单的项目。

vue官方地址Vue.js - 渐进式 JavaScript 框架 | Vue.js

一、创建项目

按着官方的说明，创建项目

npm init vue@latest

这个需要node在16以上，我的win7本不能安装nodev16的，自己捣鼓了一下，免去了重装电脑的麻烦。

运行命令后，开始一步一步的设置了（虽然替换了node，但是npm没有替换成功，还是会有提醒的。win10条件下这些问题就不会存在了。）

1、问你项目名称，自己起一个

2、问你包名称（文件夹名称），同名即可

3、TypeScript支持，算了，先简单点

4、JSX支持，用不着，不要

5、vue router支持，这个传统的东东（新版本，有别于旧版本），加上

6、Pinia（菠萝 好吃，开个玩笑，取代原vuex），加上

7、后面是测试和代码质量检查，不要了，ESLint能把我整死

 

然后加点必须品，element-plus和axios

cd studyweb
npm install element-plus --save
npm install axios --save
npm install

项目创建成功啦。 

 二、项目结构

使用vscode打开项目

cd ../
code -r studyweb

其实最大的变化就是这个config文件变了（当然了打包工具变了，这个能不变吗？）

App.vue文件

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.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!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

 从这里看，script上面多了一个setup，变化也不大，但是

HelloWorld.vue文件

<script setup>
defineProps({
  msg: {
    type: String,
    required: true
  }
})
</script>

<template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
    <h3>
      You’ve successfully created a project with
      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
    </h3>
  </div>
</template>

这个样子就和之前不一样了。

官网介绍是两种API风格，选项式API和组合式API。

选项式API和之前风格一样，依然支持。

组合式API就是现在这个样子，官网也没有更偏向于谁，看着用吧。

接下来，将分装一些请求等公共的东西，下期见。