vue/cli命令行和图形化界面两种方式创建vue3项目

使用vue/cli创建

npm install -g @vue/cli

然后输入vue --version

版本需要在4.5.4以上，

创建vue3项目

sudo vue create vue3-basic

会出现三个选项，特别要注意你的选项中有没有vue3的版本，如果没有说明vue/cli版本过旧，需要更新

❯ Default ([Vue 2] babel, eslint)   vue2的模版

  Default (Vue 3 Preview) ([Vue 3] babel, eslint) vue3的模版

  Manually select features  由于我们要添加typescript的支持，在上面两个默认的模版中，他是没有ts的支持的，所以我们要选择第三项 Manually select features ，也就是手动选择一些特性，然后按回车继续；

我们会发现它提供一系列可插拔的支持，囊括各种各样的功能，它充分体现了渐进式的特点；

按上下键选择，按空格为选中选项和取消选项，选好了以后点击回车；

? Check the features needed for your project: 
 ◉ Choose Vue version
 ◉ Babel
❯◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

进行下一步：选择使用vue的版本

? Choose a version of Vue.js that you want to start the project with 
  2.x 
❯ 3.x (Preview)  我们选择vue3版本

选择是否支持类类型的组件？

? Use class-style component syntax? (y/N) 由于vue3已经进行了重写，可以不用class，我们这里选项no(n);

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) 是否要Babel和typescript结合使用，这个Babel会自动添加polyfills还有转换JSX, 由于我们的组件写法并没有用到JSX,所以我们这里选择no(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.? (Use arrow keys)

❯ In dedicated config files 我们选择放在单独的文件里面

  In package.json

是否要将这个项目保存下来，方便你将来的项目一键安装？

? Save this as a preset for future projects? (y/N) 我们选择n

询问使用哪一种包依赖管理器？

? Pick the package manager to use when installing dependencies: (Use arrow keys)

❯ Use Yarn

  Use NPM 我们选择npm

如果显示如下界面，就说明安装成功了

——————————————————————————————————————————————————————————————————————————————————

如果大家喜欢UI界面，也可以使用图形界面创建，输入vue ui,这时候它会打开一个localhost:8000的网址；

vue ui

点击创建，选择你要创建的位置

然后点击在此创建新项目，

输入你的项目名称，然后点击下一步

我们选择手动，点击下一步

选择配置