# 一、依赖工具
# 查看 node 版本
node -v
# 查看 npm 版本
npm -v
@前端进阶之旅: 代码已经复制到剪贴板
# 二、脚手架vue-cli
# 安装 Vue CLI 3.x
npm i -g @vue/cli
@前端进阶之旅: 代码已经复制到剪贴板
安装完
vue-cli后，我们在你想要创建的项目目录地址下执行构建命令
# my-project 是你的项目名称
vue create my-project
@前端进阶之旅: 代码已经复制到剪贴板
目录结构
├── node_modules # 项目依赖包目录
├── public
│ ├── favicon.ico # ico图标
│ └── index.html # 首页模板
├── src
│ ├── assets # 样式图片目录
│ ├── components # 组件目录
│ ├── views # 页面目录
│ ├── App.vue # 父组件
│ ├── main.js # 入口文件
│ ├── router.js # 路由配置文件
│ └── store.js # vuex状态管理文件
├── .gitignore # git忽略文件
├── .postcssrc.js # postcss配置文件
├── babel.config.js # babel配置文件
├── package.json # 包管理文件
└── yarn.lock # yarn依赖信息文件
@前端进阶之旅: 代码已经复制到剪贴板
可视化界面
除了使用上述命令行构建外，
vue-cli 3.x还提供了可视化的操作界面，在项目目录下我们运行如下命令开启图形化界面：
vue ui
@前端进阶之旅: 代码已经复制到剪贴板
