Vue环境搭建及项目创建

一、环境搭建

1.引入 vue 有三种方式：

• 在编写 html 时可以通过 Vue.js 官网直接下载 vue.min.js 文件并用 script 标签引入
• 使用 cdn 方式

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

• npm 方法

2.安装 node.js

• npm 是 node.js 下的包管理工具，新版 node.js 已经集成了 npm

中文官网下载：http://nodejs.cn/
网盘链接：https://pan.baidu.com/s/1abMnsY-QzB2CysYNGHhNhQ
提取码：29lp

• 选择安装包下载，安装过程不复杂，选择好路径一路next即可
  
• 查看版本信息，以管理员身份打开"Windows PowerShell"，输入命令行
  

3.安装淘宝镜像

• 由于国内使用 npm 较慢，推荐使用淘宝镜像
• 同样需在 “PowerShell” 下输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

4.安装 vue-cli 脚手架工具

• 安装 vue-cli 2.9.6 版本看此，同样需在 “PowerShell” 下输入命令：cnpm install --g vue-cli
• 查看版本号：vue -V            查看有哪些操作：vue -h
• 这里说一句，因为我一开始使用2.9版本，想安装3.0之后的版本，使用命令 npm uninstall -g vue-cli 卸载出现问题，一直卡着不动
  
• 安装 3.10.0 版本，需输入命令：cnpm i -g @vue/cli@3.10.0
  
• 安装当前版本，输入命令：cnpm install -g @vue/cli
  
  

5.打开 vue ui 可视化项目管理工具

• 3.0版本开始增加了 ui 可视化工具，可运行检查和打包项目
  
• 输入命令启动：vue ui
  
• 若出现如下启动问题
  
• 输入命令：set-ExecutionPolicy RemoteSigned
• 更改权限为：A
• 查看当前状态（可不操作）：get-ExecutionPolicy
  

二、创建项目

• 创建，选择路径（可直接修改），在此创建
  

• 输入项目名称
  

• 选择手动配置项目
  

• 按照勾选的操作
  

• 勾选并创建
  

• 选择创建项目，不保存预设
  

• 此时可打开文件夹看到正在创建中，创建完成后目录如下
  

• 运行
  

• 运行结果
  

• 若将项目导入 idea 中，需先安装vue.js插件并重启