随笔

前几天看到阮一峰写的一件很有意思的事情，大概就是说好像只有程序员才会愿意分享自己的知识。我想了一下，好像真的是这样，各行各业，餐饮业有自己的独门密方，养殖业有自己的养殖方法，不花钱一般是得不到的。果真，程序猿是个神奇的物种。

1.vue-cli旧版本更新

关于旧版本Vue

CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

然后我们可以全局安装@vue/cli3.x。

npm install -g @vue/cli

更新完成之后我们可以使用这个命令来检查其版本是否正确 (3.x)。

vue --version

tips:我们在这里使用vue --version，不是看我们使用的vue版本，而是vue cli的版本。另外 npm uninstall vue-cli -g卸载不掉之前版本的情况可以检查一下用户变量中的全局node_moudles是否指向正确。，这里的的路径必须和你电脑 npm 的全局安装路径对应。

2.使用vue/cli构建项目

首先我们进入我们的工作空间，然后使用以下命令创建工程。

vue create project_name

在创建过程中脚手架工具会询问我们采用哪种方式，有两种选择default(默认)与manually(手动)。

pick a preset

1.默认的工程结构如下:

default_preset

2.手动配置工程

选择手动配置工程后会让你选择这些选项，空格键代表选中，a代表全选。

pick_preset

我选择了几个常用的选项。

vue-router有两种模式，hash模式和history模式。默认会选择hash模式。

下图是我选择的基本配置。

preset

配置完成后就开始下载模板了，我们可以看一下项目结构。

manually_preset

3.项目结构的改变

相比与vue-cli创建的项目，升级后的版本创建后的项目并不能看到webpack的配置。这个感觉有点像react，连端口号都不能改了，如果有需要我们可以在根目录下创建vue.config.js。本质上来说对用户还是友好的，不用困扰webpack复杂的配置问题。

3.使用vue ui 可视化配置工程

我们在创建工程的时候，vue脚手架提供了我们一个很方便的可视化创建工程的方法。运行

vue ui

会打开一个浏览器窗口，并以图形化的方式引导我们创建新的项目。