Vue：第一个vue-cli项目 简单教程

什么是vue-cli

vue-cli 是官方提供的一个脚手架，用于快速生产一个vue的项目模板
预先定义好的目录结构及基础代码，就好比我们在创建Maven项目时可以选择创建一个骨架项目 这个骨架项目就是脚手架，让我们的开发更加的快速

需要的环境

• Node.js : http://nodejs.cn
• git

确认Nodejs安装成功：

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

安装Node.js 淘宝镜像加速器 (cnpm)
这样子的话，下载会快很多

# -g 就是全局安装
npm install cnpm -g

安装的过程可能有点慢！虽然安装了cnpm 但是尽量少用！

安装 vue-cli

cnpm install vue-cli -g
# 测试是否安装成功
# 查看可以基于哪些模板创建vue 应用程序，通常我们选择webpack
vue list

第一个 vue-cli 应用程序

1.创建一个Vue项目，我们随便建立一个空的文件夹在电脑上
2.创建一个基于webpack模板的vue 应用程序

#这里的myvue是 项目名称 可以根据自己的需求起名
#在需要创建项目下的路径输入
#如果cmd太慢的话 我们还可以使用 git bash 创建
vue init webpack myvue

一路选择no即可

说明：

• Project name : 项目名称，默认 回车 即可
• Project description :项目描述 ，默认 回车 即可
• Author :项目作者 默认 回车 即可
• Install vue-router ：是否安装vue-router ，选择n不安装(后期需要在手动安装)
• Use ESLint to lint your code ：是否使用ESLint 做代码检查，选择 n 不安装(后期需要在手动安装)
• Set up unit tests : 单元测试相关 ，选择 n 不安装(后期需要在手动安装)
• Setup e2e tests with Nightwatch ：单元测试相关 ，选择 n 不安装(后期需要在手动安装)
• Should we run

  npm install

  for you after the project has been created :创建完成后直接初始化，选择 n 我们手动执行；运行结果

初始化并运行

初始化

cd myvue
npm install

执行完成后，目录多了更多依赖
运行

npm run dev

运行完成后就可以访问了
http://localhost:8080

• 点赞
• 收藏
• 分享
• 文章举报