Vue-Cli2到Vue-Cli3 Vue项目架构升级
前言
由于Vue-cli2老板官方不维护,且不推荐使用Vue-Cli2版本,推荐大家使用Vue-Cli3版本。然后我看了一下Vue-Cli3的文档,确实比之前的老版本体验好了很多。
- 目录结构更清晰.
- 弃用之前的的build文件夹的build.js和webpack.prod.conf.js
- 使用新的vue.config.js配置文件包含了之前的wepack配置项。
- 支持插件集成和插件开发。(比如PWA这样的功能可以通过插件一键集成)
- 可以通过 vue ui 命令运行图形化界面,在图形化界面上创建和管理项目
准备工作
安装 Vue CLI
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
可以使用下列任一命令安装这个新的包:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
用这个命令来检查其版本是否正确 (3.x):
vue --version
创建Vue CLI3版本的新项目
创建项目可以用vue命令也可以用vue图形化界面
运行以下命令来创建一个新项目:
vue create hello-world
我下面介绍是使用图形界面创建项目:
执行以下名运行图形化界面
vue ui
执行完浏览器会自动打开一个http://localhost:8000/dashboard的网页。其实就是一个本node环境运行的一个项目。
在Vue项目管理器的界面可以查看项目列表,创建项目,导入已有的项目。
选择目录创建项目
取项目名字和选包管理器。
选择项目需要的配置或现在已经保存的预设配置
创建项目中,这个过程中会装好npm依赖库
当前项目配置,及依赖选装
迁移老项目的src目录组件到新项目
- 直接把老项目的src目录复制到新项目,把新项目的src改一个名字例如src_bk 备份放这里以便过程中参考。
- 把老项目的static目录复制到新项目的public目录。
- 在新项目运行 npm run build, 这个时候肯定会报错,会提示你需要安装src里面用到的依赖,直接复制报错提示 需要运行的命 类似下图
- 配置项目环境变量Vue Cli3环境变量参考官方文档 在项目根目录创建各个环境的.env配置。如下图
- 再就是src目录下老老代码可能会有运行时编译的报错, 可以配置vue.conifg.js的runtimeCompiler配置为true,但是这样会让应用额外增加 10kb 。所以我是吧老项目有用到运行时编译的组件都改掉,让其打包时编译。
本地运行项目
npm run serve
如果有报错再根据错误提示修复问题。我这边目前没遇到什么大的问题。项目迁移完后一切正常。并且打包的文件比老项目架构大小少了大概30%。
- 本文标题:Vue-Cli2到Vue-Cli3 Vue项目架构升级
- 本文作者:Madman
- 创建时间:2019-05-28 11:13:12
- 本文链接:https://www.patpat.site/开发/前端/Vue-Cli2到Vue-Cli3-Vue项目架构升级.html
- 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
评论