前端-安装VueCLI

目录

一.什么是VueCLI

二.安装以及使用步骤

        1.全局安装：

        2.查看Vue CLI版本

        3.创建项目架子

        4.启动项目

---

一.什么是VueCLI

        VueCLI是Vue官方提供的一个全局命令工具。

        可帮助我们快速创建一个开发Vue项目的标准化基础架子。（集成了webpack配置）

二.安装以及使用步骤

       npm已经yarn的安装https://blog.csdn.net/weixin_52159554/article/details/150926868?spm=1001.2014.3001.5501

        1.全局安装：

yarn global add @vue/cli 
或
npm i @vue/cli -g

        2.查看Vue CLI版本

vue --verison

        3.创建项目架子

vue create 项目名称（不可以使用中文）

        输入创建项目的指令后：

        在这里使用vue2的模板进行演示：

        创建成功：

        4.启动项目

yarn 项目的启动指令
或
npm run 项目的启动指令(需要在package.json中查找启动指令)

        在这里需要提醒一点：

                并不是所有的启动项目的指令都是serve，具体需要看package.json中配置

三.项目结构

        将创建好的Vue项目在webStorm/VScode中打开：

        vscode的配置https://blog.csdn.net/weixin_52159554/article/details/151152514?sharetype=blogdetail&sharerId=151152514&sharerefer=PC&sharesource=weixin_52159554&spm=1011.2480.3001.8118       

        webstorm同vscode不同，都是配置好的，直接运行就好了。

        演示使用的webStorm：

                在前端项目启动前最好我们先下载一边项目的依赖，防止有些依赖的缺失。

        package-lock.json是npm生成的锁文件，是npm自动生成的。