Vue-Cli 创建vue3项目

1、安装node
官网:https://nodejs.org/en/download/
cmd=》node --version 查看版本

2、安装vue cli
官网:https://cli.vuejs.org/zh/guid...

npm install -g @vue/cli
OR
yarn global add @vue/cli
OR
npm install -g @vue/cli@3.11.0(指定版本)

cmd=》vue --version 查看版本

在Vue-CLI4中运行以下命令来创建一个新项目:

vue create hello-world
image.png

然后提示选取一个 preset。可以选默认的包含了基本的 Babel + ESLint 设置的 preset,这里我们选“手动选择特性”来选取需要的特性(键盘上下键即可切换)

image.png

选择自定义的配置,我一般选择这几个插件
  • 按空格键选中取消

image.png

选择vue的版本vue2/vue3,这里选了vue3:

image.png

选择是否使用路由 history router
  • Y选择使用history,但需要对后端配置;n选择的是hash,即地址栏URL中的 # 符号,它会在url中加一个#,比如:http://localhost:8080/#/Global,这里我选择n

image.png

选择css 的预处理器,我选 Sass/SCSS (with dart-sass)
  • node-sass是实时自动编译的,dart-sass需要保存后才会编译

image.png

选择 ESLint 代码校验规则,会提供一个插件化的javascript代码检测工具,ESLint + Prettier 是使用较多的

image.png

然后选择什么时候进行代码校验,我选择Lint on save
  • Lint on save 保存就检查,Lint and fix on commit 是当 fix 或 commit 时检查

image.png

选择如何存放配置
  • In dedicated config files 存放到config独立文件中
  • In package.json 存放到 package.json 中

image.png

是否保存当前的配置,N 不记录,如果选择 Y 需要输入保存名字,我选择N不记录

image.png

回车之后,等待项目创建成功
创建成功后,执行给出的两条命令

image.png

项目启动成功

image.png

你可能感兴趣的