Vue CLI

安装

Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

可以使用下列任一命令安装这个新的包：

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

你还可以用这个命令来检查其版本是否正确：

vue --version

升级

如需升级全局的 Vue CLI 包，请运行：

npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli

创建一个项目

运行以下命令来创建一个新项目：

vue create testapp

终端会弹出以下信息

• Default ([Vue 2] babel, eslint) - 选择 Vue2
• Default (Vue 3 Preview) ([Vue 3] babel, eslint) - 选择 Vue3
• Manually select features - 手动选择

我选择第三种，手动选择，出现以下界面

需要使用/取消哪些功能，按空格进行使用/取消即可

• Choose Vue version - 选择 Vue 版本
• Babel - 编译
• TypeScript - TypeScript语言
• Progressive Web App (PWA) Support - PWA技术支持
• Router - 路由
• Vuex - Vuex
• CSS Pre-processors - CSS 预处理器
• Linter / Formatter - 代码格式化警告
• Unit Testing - 单元测试
• E2E Testing - 端对端的测试

我只选择了 Babel

• In dedicated config files - 使用单独的文件
• In package.json - 将所有的文件都配置在 package.json 文件中

我选择 In package.json

然后后面的配置直接写 Yes ,下面随便写个名，我写的 esayconfig

等待安装即可…

我安装了五分钟

安装好之后，我们看一下它安装了哪些文件，它的目录结构是什么样的

• node_modules - 安装的依赖包，里面有 754 个项目

• public - 存放静态文件的目录

• src- 工作的地方！

  • 注意里面的 .vue 文件不能直接在浏览器运行，需要通过 vue-cli 编译成 .html 之后才能运行

按照提示执行命令试一下

cd testapp
npm run server

提示服务开启成功

去浏览器访问看看吧

如果想要对代码进行编译，那就使用下面的命令吧

npm run build

会生成一个 dist 目录，这是可以放到服务器上的代码目录

需要注意的是，现在这个项目中的 html 文件不能运行，是因为路径没有改，这个后面可能才会讲怎么改吧，先在这里放着吧

使用图形化界面

你也可以通过 vue ui 命令以图形化界面创建和管理项目：

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。????

点击创建

点击在此创建新项目

填好之后点击下一步

选择手动，点击下一步

我只选择 Babel，点击创建项目

直接点击创建项目，不保存预设

等待即可…

创建完成之后会出现以下界面

点击配置，修改公共路径为 ./ ，这样就能使 .html 文件可以正常访问了，点击保存修改

点击任务，点击 build 进行编译并压缩（用于生产环境），然后点击运行

等待即可…