Vue脚手架安装

Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。

下载并安装nodejs：https://nodejs.org/en/

npm镜像

# 查看当前npm镜像
npm config get registry

# 修改为国内镜像，淘宝镜像站http://npmmirror.com/ 
npm config set redistry https://registry.npmmirror.com

开始安装cli

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

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

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

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

vue --version

升级

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

npm update -g @vue/cli

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

项目依赖

上面列出来的命令是用于升级全局的 Vue CLI。如需升级项目中的 Vue CLI 相关模块（以 @vue/cli-plugin- 或 vue-cli-plugin- 开头），请在项目目录下运行 vue upgrade：

用法： upgrade [options] [plugin-name]

（试用）升级 Vue CLI 服务及插件

选项：
  -t, --to <version>    升级 <plugin-name> 到指定的版本
  -f, --from <version>  跳过本地版本检测，默认插件是从此处指定的版本升级上来
  -r, --registry <url>  使用指定的 registry 地址安装依赖
  --all                 升级所有的插件
  --next                检查插件新版本时，包括 alpha/beta/rc 版本在内
  -h, --help            输出帮助内

检查vue版本 并 创建项目

检查版本

vue -V

创建项目

C:\Users\liux\Desktop\vuecode>vue create vue-myapp
# 您与默认 npm 注册表的连接似乎很慢。选择是否切换安装源！
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npmmirror.com for faster installation? Yes

# 上下方向键选择，回车确认！随后会自动安装依赖
Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
> Default ([Vue 2] babel, eslint)
  Manually select features

# 安装过程！！！
Vue CLI v5.0.8
✨  Creating project in C:\Users\liux\Desktop\vuecode\myapp.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

added 847 packages in 36s
🚀  Invoking generators...
📦  Installing additional dependencies...

added 86 packages in 7s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project myapp.
👉  Get started with the following commands:

# 安装结束后会提示如何启动服务
 $ cd vue-myapp
 $ npm run serve

# 启动完成！！！
 DONE  Compiled successfully in 6731ms                                                                          16:39:57

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.211.55.108:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

浏览器访问如下图则启动成功

安装 Vue-Router

官方文档，一定要注意版本 https://v3.router.vuejs.org/zh/installation.html

可以到 npm 官网搜索最近的版本号 https://www.npmjs.com/search?q=vue-router

指定版本号安装

# 默认安装的是最新版本
npm install vue-router

# npm i vue-router@3.6.5

下载好的插件都可以在package.json中看到

Mac安装方式

官方文档文档下载mac安装包默认安装即可

获取nodejs模块安装目录访问权限

sudo chmod -R 777 /usr/local/lib/node_modules/

安装淘宝镜像，国内直接使用 npm 的官方镜像是非常慢的，所以这里使用淘宝 NPM 镜像
更改npm源：

npm config set registry https://registry.npm.taobao.org

配置后可通过下面方式来验证是否成功，如果显示“https://registry.npm.taobao.org”则说明配置成功

npm config get registry

安装Vue

liu@MacBook-Pro ~ % sudo npm install -g @vue/cli
Password:
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated subscriptions-transport-ws@0.11.0: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md

added 847 packages in 37s

检查Vue

liu@MacBook-Pro ~ %  vue --version
@vue/cli 5.0.8