创建第一个Vue-Cli项目

一、环境准备

1. Node.js

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

image.png

2. git

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

image.png

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

验证环境是否搭建成功

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

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

  
  
  image.png

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

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

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

# 然后再执行
npm install cnpm -g

image.png

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

4. 安装vue-cli

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

执行命令后：

image.png

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

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

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

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

image.png

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

image.png

• 初始化并运行

cd myvue
npm install
npm run dev

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

image.png

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

image.png

三、其他内容

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

• 根目录下的package.json存放了我们项目的基本信息和开发环境的依赖文件

  
  
  image.png
• index.html是我们项目一开始的首页

这里面只有一个id为app的

元素，通过main.js文件绑定该div

image.png

通过main.js文件跳转到App.vue组件

image.png

App.vue组件又跳转到HelloWord组件

image.png

对应首页的内容

image.png