vue3安装和开发环境搭建

一，简介

二，vue-cil 搭建 vue3 开发环境

1，安装：vue-cli

npm install -g @vue/cli
或者
yarn global add @vue/cli

查看vue版本

vue --version

这时候可以展示出类似这样的版本信息@vue/cli 4.5.6。如果你的版本低于这个，可以再使用npm install -g @vue/cli来进行安装。

2，利用vue-cli创建项目

vue create 项目名

输入完成后，他会有这样一句询问。

Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n)

意思是你不能科学上网，建议你使用淘宝源，这时候你需要选择Y,也就是使用淘宝源进行创建。如果你已经配置淘宝源不会显示这个选项。

当你选择Y之后，就会跳出三个菜单让你选择。

? Please pick a preset: (Use arrow keys)            //请选择预选项
> Default ([Vue 2] babel, eslint)                   //使用Vue2默认模板进行创建
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)   //使用Vue3默认模板进行创建
  Manually select features                          //手动选择(自定义)的意思

因为你要使用TypeScript进行开发 Vue3 的代码，所以不能直接使用第二项默认模板，这时候我们选择第三项手动选择。选择的时候按回车就可以实现。(如果这时候你没有上面的三个选项，说明的 vue-cli 是旧版本，需要你更新。)
这时候就会出现很多可插拔的选项让你自定义选择：

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors             //CSS预处理器
 (*) Linter / Formatter             //格式化工具
 ( ) Unit Testing                   //单元测试
 ( ) E2E Testing                    //E2E测试

这里我们需要再多选一个TypeScript的选项，然后再按回车进入下一层选择。

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview)

这里要选择 3.x 的版本，点击回车，然后会提示你是否需要使用class-style，教学中旧不使用这个类样式语法了，所以我们选择n。

 Use class-style component syntax?

然后会出现下面的选项 ，意思是否使用TypeScript和Babel的形式编译 JSX.这里我们也选择n

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

然后会出现ESLint的一些配置,这里我们选择第一项，默认就好，因为下面这些规则并不是这个课程的重点。

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated)

回车后会让你选择增加lint的特性功能。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save         //保存的时候进行Lint
 ( ) Lint and fix on commit   //需要帮你进行fix（修理），这项我们不进行选择

回车后让你选择这些配置文件时单独存放，还是直接存放在package.json文件里。这里选择放在单独的文件里。

Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

最后一个问题，是问你需不需要把这些配置保存下来，下次好直接进行使用。我这里选择不用(n)。淡然你可以自行选择

Save this as a preset for future projects? (y/N)

如果你同时安装了npm和yarn来个包管理软件，它还会作最后一次询问，让你选择使用什么进行下载。

? Pick the package manager to use when installing dependencies:
> Use Yarn
  Use NPM

我选择了yarn进行安装，也可能是心里问题，我老觉的 yarn 更快一些，我这里只用了 10 几秒就完成了下载和构建。 出现下面的信息，说明我们已经安装完成了。

Done in 10.33s.


 $ cd vue3-1
 $ yarn serve

三，增加typescipt

typescript

vue add typescript

# ? Use class-style component syntax?   N
# ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?   Y
# ? Convert all .js files to .ts?   Y
# ? Allow .js files to be compiled? (y/N)   Y
#? Skip type checking of all declaration files (recommended for apps)?      N

vue-router

vue add vue-router

vuex

vue add vuex

# 安装vuex模块化插件
npm install vuex-module-decorators

vite 安装

#Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允许快速提供代码。

#通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目

npm init vite-app 项目名

UI库引入
#Ant-design-vue
npm install ant-design-vue@next
npm install -D babel-plugin-import
安装完之后，在main.ts中加入import 'ant-design-vue/dist/antd.css';

在根目录新建.babelrc文件，写入:

{
    "plugins": [
        ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
      ]
}