vue3 脚手架搭建

安装vue-cli搭建 Vue3开发环境

1.首先需要安装node 官网地址
2.在cmd命令行输入npm install -g @vue/cli安装vue-cli

3.安装完成后检查版本
vue --version 或者 vue -V(注意V是大写)

注意：只有最新版本(V4.5.4 以上版本)才有创建 Vue3 的选项

4.使用vue-cli命令行创建项目(9步对话式询问)

1. 命令行中输入vue create vue3-1(vue3-1是你创建的项目名)，它会询问：

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

意思是你不能科学上网，建议你使用淘宝源，输入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 的版本

`Use class-style component syntax?`

它提示你是否需要使用class-style，我就不使用这个类样式语法了，所以我们选择n

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

意思是否使用TypeScript和Babel的形式编译 JSX.这里我们也选择n

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

然后会出现ESLint的一些配置,这里我们选择第一项，默认就好

? 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（修理），这项我们不进行选择

让你选择增加lint的特性功能 默认就好

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

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

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

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

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

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

这里选择yarn，也可以选择npm 没什么很大区别

$ cd vue3-1
$ yarn serve

构建完成后会出现这两个命令
然后根据提示在命令行输入cd vue3-1进入项目，然后再输入yarn serve开启项目预览。这时候就会给出两个地址，就可以访问到现在的项目.

App running at:
  - Local:   http://localhost:8080/   // 把地址复制到浏览器就可以访问到
  - Network: http://192.168.0.118:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

文章内容参考js胖