用脚手架（vue-cli）搭建一个vue项目（一）---vue cli介绍

一、前提

1.使用vue-cli的目的是神魔？-------答：结合webpack或者webpack-simple，为vue项目提供一套统一的目录结构

2.vue是神魔？----答：是一套工具（是为vue项目生成一套统一目录结构的工具）

3.vue简单介绍！

答：①vue-cli是vue官网提供的工具，和vue项目功能没有关系

②vue-cli是一个全局的命令行工具，需要全局安装。

③在vue官网中--生态系统--工具--vue cli可以查看具体的内容（https://cli.vuejs.org/zh/guide/）

④关于vue-cli的安装的解释

      1.安装node（注：node版本为8.9+，为神魔安装node？---答：vue是基于node开发的）

       2.在cmd中通过npm i -g @vue/cli命令行安装(安装的是最新版本的稳定版3+)

       3.通过vue --version检查vue版本（安装成功就可以在cmp中使用vue指令了）

       4.如果希望在3的版本中使用 2版本的指令，需要用下面语句做一下桥接

         npm install -g @vue/cli-init(原因：vue-cli 3和2的指令是不一样的)

二、.vue-cli+webpack-simple搭建一个项目

1.在准备放置项目的目录下，打开cmd

图1

2.输入命令 vue init webpack-simple 项目名称   或者  vue init webpack 项目名称  等待生成。

安装成功，那么项目名，描述、模板为（webpack和webpack-simple自己选择）等自己根据需求填写。

注：使用veu-cli的指令，初始化某个模板的vue项目（不同的项目有不同的模板--此处使用webpack-simple为例）

图2

操作结果：项目目录

图3

3.接着运行 cd project（进入你的项目目录下），npm install（初始化项目，安装项目需要的各种包），npm run dev（运行项目），

图4

运行之后的目录：

图5

4.运行结果：

图6

参考内容：https://blog.csdn.net/qq_35574915/article/details/76060997