创建第一个Vue-Cli项目

一、环境准备

1. Node.js

进入node.js官网，根据自己电脑配置下载对应应用即可：http://nodejs.cn/download/

2. git

Git官网地址：https://git-scm.com/downloads

如果下载不下来，可以通过淘宝镜像下载：https://npm.taobao.org/mirrors/git-for-windows/

验证环境是否搭建成功

cmd 下输入 node -v,查看是否能够正确打印出版本号即可!
cmd 下输入 npm-v,查看是否能够正确打印出版本号即可!

3. 安装Node.js淘宝加速器

注意，要使用管理员权限打开cmd窗口下载

# -g 就是全局安装
npm install cnpm -g
# 若安装失败，则将源npm源换成淘宝镜像
# 因为npm安装插件是从国外服务器下载，受网络影响大
npm config set registry https://registry.npm.taobao.org

# 然后再执行
npm install cnpm -g

注意，安装后生成的文件在C:\Users\本地的管理员\AppData\Roaming\npm目录下

4. 安装vue-cli

cnpm install vue-cli -g
# 查看是否安装成功
vue list

执行命令后：

二、正式创建第一个Vue-Cli程序

任意创建一个空文件夹
基于vue-cli创建一个webpack 模板的 vue 应用程序

# 这里的 myvue 是项目名称，可以根据自己的需求起名
vue init webpack myvue

等待完成相关模板下载后，根据实际需要初始化项目

点击Enter键，默认项目名为vue-demo
后续同理，可以在Autor栏目下自定义名称

初始化并运行

cd myvue
npm install
npm run dev

如果运行过程中出现错误，可以通过npm audit fix进行修复

项目运行成功后
在浏览器中打开链接：

三、其他内容

当项目构建完成后，我们用IDEA打开这个项目（也可以使用其他工具打开）
我们可以看到

根目录下的package.json存放了我们项目的基本信息和开发环境的依赖文件
index.html是我们项目一开始的首页

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-demo</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>