常常说要开始学习,却总是止于嘴。
一起开始学习吧 . . .
1 安装脚手架
npm install -g @vue/cli
# OR
yarn global add @vue/cli
2 检查版本 Vue CLI v4.5.7
vue -V
3 搭建项目
vue createvue3.0
? 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 //手动选择(自定义)的意思
这时候我们选择第三项手动选择。选择的时候按回车就可以实现。(如果这时候你没有上面的三个选项,说明的 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 ofvue.js that you want to start the project with (Use arrow keys)
> 2.x
3.x (Preview)
这里要选择 3.x 的版本,点击回车,
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
的一些配置,这里我们选择第一项,默认就好 回车后会让你选择增加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)
静静得等待即可——-出现下面的信息,说明我们已经安装完成了。
Done in 10.33s.
$ cd vue3
$ npm run serve
根据提示在命令行输入cd vue3
进入项目,然后再输入npm run serve
开启项目预览。这时候就会给出两个地址,都可以访问到现在的项目.
根据提示在命令行输入cd vue3-1进入项目,然后再输入yarn serve开启项目预览。这时候就会给出两个地址,都可以访问到现在的项目.
把地址放到浏览器的地址栏,看到下面的页面,说明安装ok了。
![Vue3.0 起步 快速搭建项目 系列一插图 vue3.0](https://i-blog.csdnimg.cn/blog_migrate/93a75e987da2d0a4c5f6ef206fb43e97.png)