用vue-cli创建有vue-router的vue项目

安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

这是全局安装，只需要安装一次

创建一个项目

vue create my-project

1。让你选择默认配置还是手动配置，我这里选择手动配置

image

2。空格键可以选择/取消选择，这里我取消了Linter/Formatter,选择了Router,
选好后按回车键

image

3。 问你babel等这些配置文件放哪？// in dedicated config files（在专用配置文件中） in package.json（放在package.json里）我选In package.json

image

image

4。问你路由是否使用history模式，我这是选Y

image

image

这是history模式

这是history模式

这是hash模式

这是hash模式

5。问是否将以上这些保存为未来项目的预配置？ //如果你选择y那么下次搭建项目是就会出现你这一次配置的选项 ，就是上面第1。的选择项里面会有。 我选择n

image

6。等待下载完成后，根据提示输入命令运行

image

运行结果

image

目录结构

image

在安装了vue-cli3的情况下使用vue-cli2

查看cli的版本

vue -V

image

vue-cli3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。我们需要安装一个桥接工具才能使用 vue-cli 2.x创建项目

  npm install -g @vue/cli-init

安装完成后我们用 vue-cli 2.x 创建一个项目

  vue init webpack vue-cli2-router-project

配置如下

image

执行它提示给的命令来运行项目

image

运行结果

image

目录结构

image

Vue CLI中文网

个人网站：www.panbingwen.cn