vue3.x 脚手架搭建全流程

第一步,当然是更新本地环境啦

打开vue官网,找到上面的

vue3.x 脚手架搭建全流程_第1张图片

点进去, 点击安装,里面有详细的教程,输入

npm install -g @vue/cli
复制代码

安装好了以后,找到一个干干净净的终端,可以但不限于vs code 的终端,开敲~

敲完回车,会出来是哪个选项~

1.第一个和第二个咱不看,创建含有括号内的内容的脚手架,默认的有啥意思,选择第三个,自己选择,大力点回车

2.到这一步会出来很多东西,一个个说

(1)第一个就比较直观了,问你选择vue版本不,不选的话默认vue2,选了以后还是可以灵活选择的

(2)babel 将es6语法转义成es5的 必选

(3)ts 看需求,如果你用的是anyscript,大可不必占空间,当然最好是选上了

(4)Progressive Web App (PWA) Support 给项目添加一些webapp支持,比如可以在移动端支持发送到桌面图标,根据不同平台和浏览器尝试去掉浏览器自带的地址栏、底栏实现全屏体验等,意义不大,后期可以在index.html中自己加上一些配置,可以不选

(5)Router 必选

(6)vuex vuex就像眼镜,你需要的时候自然会用到他,但是刚创建项目的时候不知道能不能用上,怎么办,那就先装着吧,选上!

(7)CSS Pre-processors css预处理 可选,需要就勾上

(8)(9)(10)分别是代码风格、格式校验,单元测试,端对端测试,都不选

(注意选的时候空格是控制选中状态的,回车是确认,上下箭头控制选择xiang)

vue3.x 脚手架搭建全流程_第2张图片

3.选择vue版本

当然是选3.x啦

4.使用类样式的组件语法?

当然不用 用力输入n然后回车

5.和TypeScript一起使用Babel(现代模式、自动检测的腻子脚本、编译JSX)?

yes

6.使用历史模式路由器?

nope

7.你要用啥管理各种配置

当然是package.json,项目当然是小小的才可爱

8.将此保存为未来项目的预置?

no

回车!

vue3.x 脚手架搭建全流程_第3张图片

搭建成功,撒花

你可能感兴趣的:(vue.js,javascript,前端)