之前在新公司接手一个不算老的项目(只能说vue更新太快了),用webpack自己配置优化。用webpack-bundle-analyzer(可视化)查看包内具体依赖占用空间大小,Gzip压缩使包大小大大减小(效果显著)!虽然还用了webpack.dllplugin(用来把依赖从vendor这个包分离出来),但是不知道是否因为版本问题使项目有些bug。
但是用了cli3,这些问题都不是问题,太智能了。
安装
npm install -g @vue/cli
创建项目(记得不要用git-bash,否则后面配置无法选择)
vue create project-name
配置项目(空格选择,回车下一页)
1
让你选择project(是之前配置的保存选项),default(默认),自定义(自己配置项目)
2
如果是pc端,一般会这样勾选。第三个是移动端支持(似乎很强大),最后两个是测试相关的。
3
是否使用class风格的组件语法?
使用Babel与TypeScript一起用于自动检测的填充?
路由使用历史模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面(这种模式需要后台配合,否则页面刷新会出现404)
挑选一个css预处理工具(官方推荐第一个,很多新特性都在其中)
4
代码规范:1.typescript格式验证工具 2.只进行报错提醒 3.不严谨模式 4.正常模式 5.严格模式
下面一步是让你选择代码什么时候检查,一般选保存时。
在下一步是配置文件放在什么地方,随意。
最后一步是让你决定是否保存这次的选项,下次可以在第一步直接使用,随意。
接下来就完成了。