0603 Vue 最新 下关于 vue-cli的初始配置和基本使用

Posted 2020-11-10 xfym888

Vue.cli 是什么?

    为单页面应用快速搭建 (SPA) 繁杂的脚手架。

    它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。

   (说明:使用cli的前置知识条件是对node.js的构建有一定掌握,对Vue有一定认识和掌握,!!!1)

 

Vue cli 的初始配置步骤:

   1. 安装node.js到当前系统.(node官网提供各系统与各位数的版本下载)

    

   2.在node的命令行环境下进行后续安装.(执行安装目录下的 node.exe文件)

       2.1   先行安装 cnpm

              安装命令: npm install cnpm -g (安装会有点漫)

              (顺带讲解一下cnpm这是什么鬼 ?）

                本来nodes自带一个npm（node package manager）-即nodejs的包管理器，用于node插件管理（包括安 装、卸载、管理依赖等）但是老外的npm首网络影响大,不好用.因此淘宝搞了一个同等工具,cnpm。频率 为10分钟同步一次,用法与npm完全一样,只是命令行变为 cnpm  ****

      2.2  安装vue.cli

             安装命令:cnpm install  vue-cli -g 安装脚手架到全局

     2.3   通过成安装后  来查看可用的cli模板

            命令: vue list

• 常规我们使用广受好评的webpack模板

  3 安装完毕后的项目创建

        3.1 进入项目目标文件夹路径,在窗命令:vue init webpack vuecli  项目名称

                   系统会有若干创建应当,yes or no即可

        3.2 引导完毕后,自动开始下载文件并进行创建(会要点时间)             

        3.2 创建完毕后系统提示 project initialization finished!

               进入项目目标文件夹,并执行 cnpm run dev (项目名称 ) 启动项目

               启动成功标志:访问  http://localhost:8080 成功访问启动页面