vue-cli3.x 新特性及踩坑记

前言

vue-cli 都到 3.0.3 了，所以是时候玩转一下 vue-cli 3 的新特性了。

1. vue-cli 3.0.3

以下的安装都是在 macOS 的环境下进行的，当然在 windows 和 linus 下也同理。

1.1 安装

vue cli 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

可以使用下列任一命令安装这个新 vue-cli 3.0.3 的包：

  
  
  

   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      npm install -g @vue/cli
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      # OR
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      yarn global add @vue/cli
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      复制代码
     
     
     
    
    
    
  
  
  
  

你还可以用这个命令来检查其版本是否正确 (3.x)：

  
  
  

   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      vue --version
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      复制代码
     
     
     
    
    
    
  
  
  
  

或者：

  
  
  

   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      vue -V
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      复制代码
     
     
     
    
    
    
  
  
  
  

1.2使用图形化界面

你也可以通过 vue ui 命令以图形化界面创建和管理项目：

  
  
  

   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      vue ui
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      复制代码
     
     
     
    
    
    
  
  
  
  

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

1.3 创建项目

1.3.1 默认型

• 新建文件夹，在该文件夹下打开命令窗口，输入以下命令进行新建项目，当然我起的项目名字叫 vue-webpack-demo

  
  
  

   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      vue create vue-webpack-demo
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      复制代码
     
     
     
    
    
    
  
  
  
  

• 会让你选择默认（default）还是手动（Manually），（注：现在vue-cli3.0默认使用yarn下载）。

• 先是默认的，一路回车后的项目目录如下：

• 再来手动的，我起的项目名字叫 vue-webpack-demo2，如下图，让你选择那些选项，按 空格键 是选择单个，a 键 是全选。

• 我选择了常用的如下选项：

• vue-router 默认 hash 模式，所以我选择默认的，选择了 n ，而不是 history 模式：

• 下一步之后问询问你安装哪一种 CSS 预处理语言，我是选择了用的 less。

• 这个是问你选择哪个自动化代码格式化检测，配合 vscode 编辑器的，Prettier - Code formatter插件，我选的随后一个。

• 第一个是保存就检测，第二个是 fix 和 commit 的时候检查。

• 选择单元测试解决方案，Mocha是流行的JavaScript测试框架之一，通过它添加和运行测试，从而保证代码质量，chai 是断言库，我两个都选择了。

• 上边这俩意思问你像，babel, postcss, eslint 这些配置文件放哪？第一个是：放独立文件放置，第二个是：放package.json里，这里小汪选择放单独配置文件，选第一个

• 下面倒数第二行问你是否将以上这些将此保存为未来项目的预配置吗 ？选择是的时候，下次创建项目时，可以选择刚刚配置好的配置，不用再每个都配置一遍。最后一个是选择的名字，你随意选择，点击确定就开始下载模板了。

• 再创建项目的时候，刚刚配置好的选择的名字 vue-webpack4 会这样子出现：

• 启动命令

  
  
  

   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      // 1. 进入项目
     
     
     
    
    
    
   

    
    
    

     
     
     

    
    
    
    
    
    

     
     
     

      
      
      cd vue-webpac