Win10 Vue-cli安装及可视化Vue项目创建

1 Vue-cli安装

1.1 CDN引入

对于制作原型或学习，你可以这样使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

1.2 NPM安装（推荐）

（1） 安装Node.js

Node.js下载网址：https://nodejs.org/en/,下载完成点击默认安装即可。安装完成后再cmd查看是否安装成功，输入：

node -v

若出现版本号则说明安装成功。

（2） NPM换源

直接用npm下载较慢，建议使用cnpm安装。在cmd中输入：

npm install -g cnpm --registry=http://registry.npm.taobao.org 

(3) 安装Vue-cil

在cmd中输入：(参考官方文档：https://cli.vuejs.org/zh/guide/installation.html)

cnpm install -g @vue/cli

若想安装指定版本则加上版本号即可，以3.9.2版本为例：

// cnpm install -g @vue/cli@版本号

cnpm install -g @vue/cli@3.9.2

等待安装完成后查看是否安装成功，在cmd输入命令：

vue -V

出现版本号说明安装成功。

2  可视化项目创建

在cmd中输入：

vue ui

则浏览器显示为：

点击创建：

然后选择创建项目的地址——>最后点击在此创建项目：

输入相应的信息，点击下一步进入预设

选择手动或者默认！若选择手动则根据需要选择安装相关功能

建议安装这几项功能：

最后进入配置：配置文件格式选择Stand config -> 最后点击创建项目即可！

也可根据需要保存这些预设，下次直接使用相同配置！

若出现如下界面则安装成功！

3 安装插件

在项目仪表盘中点击插件

再选择添加插件如：element

搜索相关插件按需配置即可！

4 安装依赖

在项目仪表盘中点击依赖然后安装即可！如：axios