使用vue-cli构建Vue项目

1、安装前需要先安装 node 和 npm (略)

2、有了node和npm环境以后安装脚手架(就是vue-cli)

使用vue-cli构建Vue项目
安装成功后 使用 vue --version 命令查看版本
使用vue-cli构建Vue项目

3、 创建项目

新建文件夹,在要创建的文件夹地址栏输入 cmd 回车快速打开命令行
使用vue-cli构建Vue项目
打开命令行输入 命令 — test 是项目名
使用vue-cli构建Vue项目
然后会让你勾选编译工具 可以回车直接进入下一步。这里我用下键头选择下面一个 Manually select fetatures 意思是 手动选择
使用vue-cli构建Vue项目
这里用上下箭头加 空格 按自己需要选择
使用vue-cli构建Vue项目
这里问我们 router 是否使用 history 模式,vue 中默认是用 hash 来模拟一个 url 请求。启用 html5 里的 history 模式还需要后端提供支持,所以不选。 选N
使用vue-cli构建Vue项目
这里是问一些配置放在哪里,咱们放在 package.json 里面(这两个区别不是很大,看个人习惯)
使用vue-cli构建Vue项目
这里问是否保存当前配置作为模板,下次直接使用(看自己需要选择)
使用vue-cli构建Vue项目

4、启动项目

安装完成后按提示就可以启动项目了 看图:
使用vue-cli构建Vue项目
使用vue-cli构建Vue项目
启动成功浏览器来访问一下吧 ^ o ^
使用vue-cli构建Vue项目

5、项目结构简单介绍

创建好后的工程 看图:
使用vue-cli构建Vue项目
用前端编辑器打开,这里我用的是 vscode
使用vue-cli构建Vue项目