vue3脚手架的安装

1,769 阅读2分钟

安装nodejs

前往node官网,选择合适版本(推荐长期维护版),下载后安装,安装过程一直点点点就可以了

查看node和npm的版本(node一般都包含的npm)

 

安装@vue/cli

全局安装@vue/cli ,在命令提示窗口执行:npm install -g @vue/cli

安装完成后查看版本:vue -V

解决方案:以管理员身份运行PowerShell,执行命令set-ExecutionPolicy RemoteSigned

重新检查@vue/cli版本

 

创建项目

根据自己的喜好通过doc命令定位到对应文件夹位置,输入vue create my-blog创建项目,my-blog是项目名,接下来是一系列的问答进行配置

前两个是自动配置脚手架,我选择手动配置

 

选择需要的功能(空格建选中,按回车会直接进入下一步哦)

babel转换es6语法必要
typescriptts语法看需要,一般js就够用
router管理路由必要
Vuex状态管理看需要选择全局状态管理
css pre样式预处理器必要
linter/Formatter统一代码风格必要
Unit Testing单元测试一般不会用到
E2E Testing端对端测试一般不会用到

选择要安装的脚手架版本?

选择是否使用历史模式?History历史模式的url和正常钉钉访问地址一样,hash的特点是会带上“#”号

选择css预处理器?我比较熟悉的是sass/scss

选择哪个自动化代码格式化检测?

ESLint with error prevention only只检测错误
 ESLint + Airbnb config独角兽公司的Airbnb,有人评价说“这是一份最合理的javascript的编码规范”它几乎涵盖了js的各个方面
ESLint + Standard configstandardjs是一份强大的js编码规范,自带linter和自动代码纠正,没有配置,自动格式化代码,可在编码早起发现规范问题和低级错误
ESLint + PrettierPrettier 作为代码格式化工具,能够统一整个团队的代码风格

选择语法检查方式

Lint on save保存就检测
Lint and fex on commit用户提交文件到git的时候检测

babel,postcss,eslint这些配置文件放哪?

in dedicated config files在专用配置文件中,就是单独管理
in package.json放在package.json里

是否将以上配置作为将来的预配置?没必要,我选择n

项目安装完成

运行项目npm run serve

完成收工