Vue Cli 3.0 安装,创建一个新项目

  • Node.js & cnpm 安装

    没有安装的同学,可以参考我的另一篇文章: Node.js安装与环境配置
    Node.js版本必须是8.9 或更高版本

  • 安装 Vue cli

    npm 安装:npm install -g @vue/cli
    cnpm 安装:cnpm install -g @vue/cli
    yarn 安装:yarn global add @vue/cli // yarn官方文档,和 npm 异曲同工

  • 修改npm下载地址

    为什么要修改下载源地址呢?

      因为当你看到下文的时候,会了解到,当手动创建配置并自选配置时,会下载很多的依赖,然而用 npm 下载的话,可能会出现下载失败,导致创建不成功或者卡死,因此,即便下载过cnpm,但还是采用接下来表述的方法,去修改npm的下载源,以提高项目创建的速度~

    没修改之前,这里卡了5个小时 -_-、

    好了,进入正题:

    1. 命令行设置新的registry 配置:npm config set registry https://registry.npm.taobao.org
    2. 命令行敲入 npm config get registry 查看当前 npm 下载源,如下图所示,即成功

      测试结果


  • 创建新的项目

    命令行 cd 进入想要放置项目的文件夹 vue create my-project 开始创建
    or
    调用Vue的GUI vue ui 在浏览器上进行项目的创建与配置

    手动创建项目时,若自选配置的话,会出现以下选项,可以根据自己的需求自行选择~


    摘自网络

    (空格选中或取消 && 上下键移动光标 && 回车确认)

  • 运行项目

    npm run serve // 运行项目

    运行成功

    浏览器打开

  • 打包项目

    npm run build // 打包项目,打包后的项目放置在当前项目的dist文件夹里,发版上线的时候,将dist交给后台放到服务器上就好

  • 后续学习

    由于在vue cli 3.0 版本,vue将很多的配置文件给隐藏了,目录结构也较2.0发生了些许变化,在此提供 官方文档地址 ,需要的同学可以去阅览一下~



(限于本人技术有限,本文如有表述不当的地方,欢迎赐教~)
(转载到其他平台需含本文的链接)

你可能感兴趣的:(Vue Cli 3.0 安装,创建一个新项目)