一般我们都不会手动通过 npm 去安装 Vue 插件。而是通过脚手架 Vue CLI 去初始化一个 Vue 项目。

Vue CLI 官网：https://cli.vuejs.org/zh/

安装步骤

  1. 通过 npm 全局安装 vue cli 脚手架npm install -g @vue/cli

image.png
目前安装的版本是 5.0.4

  1. 利用 vue cli 初始化 vue 项目 vue create hello-world 选择 Vue2.0 版本

image.png

  1. 完成安装

image.png

启动项目

  1. 进入该项目目录下 cd hello-world
  2. 启动项目 npm run serve 或者 yarn serve

image.pngimage.png

目录结构

  • node_modules（项目依赖包文件）
  • dist（项目打包文件）
  • public（公共静态资源）
    • favicon.ico（网页图标）
    • index.html（静态页面）
  • src（编译文件）
    • assets（静态资源）
    • components（全局组件）
    • App.vue（根组件）
    • main.js（打包入口）
  • .gitignore（git 过滤配置）
  • babel.config.js（ECMAScript 解析文件）
  • package.json（依赖包/插件/项目信息记录）
  • README.md（介绍文档）
  • vue.config.js（运行/打包配置文件）