1 安装准备

1.1 安装node.js

1.2 安装淘宝镜像

1.3 安装vue脚手架 -g 全局安装

  1. cnpm install -g @vue/cli


2 构建项目

2.1 通过命令构建项目

2.1.1 新建项目目录

2.1.2 在终端打开目录

2.1.3 创建项目


  1. 执行 vue  create  项目名称


2.1.4 选择项目包括的组件

image.png
注释： 默认 或者自定义

2.1.5 自定义安装

image.png

  1. Babel  编译   必须有的一个功能
  2. Typesctipe  如果不是用的 javascript 可以选
  3. Progressive Web App   渐进式web开发   用的比较少
  4. Router    路由
  5. Vuex      状态管理
  6. CSS Pre-processors  CSS预处理器
  7. Linter / Formatter   代码格式化
  8. Unit  Testing  单元测试
  9. E2E Testing    端对端测试



image.png

检查选择的 选项
选择是否需要保存 保存的名字 选择 编译器
然后会自动进行创建

2.2 通过图形化界面构建项目

2.2.1 打开图形化界面创建项目

  1. vue  ui

image.png

2.2.2 创建步骤，傻瓜式操作

3 项目介绍

3.1 目录介绍

image.png

  1. Node_modules  存放依赖包
  2. Public  静态文件存放的地方
  3. src 存放代码的目录
  4. .gitignore   配置git忽视的文件
  5. babel.config.js 编译的配置
  6. package.json 和包相关的内容
  7. package-lock.json 和包相关的内容
  8. README.md 操作文档

3.2 常用命令介绍

  1. npm run serve 热加载  需要进入项目目录中执行
  2. npm run build 编译