Vue-cli入门级教学

什么是vue-cli？

        vue-cli 就是快速搭建一个 vue 项目的脚手架工具。vue-cli 有一套成熟的vue项目架构设计,能够快速初始化一个Vue项目。

如果快速搭建vue-cli项目？

        使用vue-cli需要安装node.js，Vue CLI 需要 Node.js 8.9 或更高版本。Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境。官网:http://nodejs.org/

        NPM的全称是Node Package Manager，是一个Node.js包管理和分发工具。是全球最大的模块生态系统，里面所有的模块都是开源免费的；是Node.js的包管理工具，相当于前端的Maven 。

下载node.js

        如果是.msi文件。安装node.js一直点击下一步即可，安装完node.js后npm也会自动被安装。

        安装完毕后可以在命令行窗口中查看版本信息：

Vuecli的安装与卸载

安装vue2的命令：npm install vue-cli -g

卸载vue2的命令：npm uninstall vue-cli -g

安装vue3的命令：npm install -g @vue/cli[@4.5.13]

安装vue3的命令：npm uninstall -g @vue/cli

查看vuecli版本：npm list -g @vue/cli

创建vuecli项目

（1）找到想要存放vue-cli项目的文件夹，在文件夹处打开命名行窗口，在命令行中输入命名 vue create 项目名。例如：

（2）回车，之后会弹出如下界面：

    

（3）该界面是提示用户选择vue2写这个项目，还是用vue3写这个项目，还是自定义。用上下箭头选择后敲回车。就会生成vue-cli项目。选项说明如下：       

Manually select features选项。手动设置（通过↑ ↓ 箭头选择你要配置的项，按 空格 是选中，按 a 是全选，按 i 是反选）*代表被选中。

（4）敲击回车后进入如下界面。在界面中选择使用的vue版本

（5）敲击回车后进入如下界面。选择生成依赖包管理的文件方式

        In dedicated config files 存放到独立文件中

        In package.json 存放到 package.json 中

        选择inpackage.json

（6）是否将此设置保存为预设模板以供将来的项目使用？建议选择N，即不保存，否则以后创建项目修改不配置不太方便。

（7）完成上述操作后，开始生成项目，如下界面代表创建项目成功。

（8）进入项目跟目录运行npm run serve，出现如下界面代表服务运行成功。

（9）关闭vue项目的服务快捷键为ctrl+c