Vue CLI 3 项目构建基础-前端进阶之旅

# 一、依赖工具

# 查看 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

@前端进阶之旅: 代码已经复制到剪贴板

Preview

# 二、脚手架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

@前端进阶之旅: 代码已经复制到剪贴板