vue-cli4.0安装及应用生成

vue脚手架4.0在2019年10月16日(据说)正式发布，卧槽无情，因为我甚至还不知道3.0长什么样子~~~~~~~~~~~~~~~~~~~~~~

如果我们以前在自己电脑中安装过vue-cli首先你需要将它卸载

npm uninstall vue-cli -g

安装vue-cli4.0版本，有条件可以配置下cnpm，这样下载快点，用yarn也中

npm install @vue/cli -g

mac安装和卸载，如果你没有设置过，需要加sudo

sudo npm install @vue/cli -g

安装完成后，输入vue --version，我就手打了，插图还要我去截图

vue --version
// 终端输出：@vue/cli 4.0.5  就ok了

创建项目，windows和mac无差别，记住下面这句命令，但是千万先别执行，往下看

// vueapp就是你的项目名称，建议不要用中文，不要用驼峰出现大写，用中划线或者下划线也可以
vue create vueapp

这里我们需要注意一个严重的问题就是生成应用的时候对于安装选项的选择，在vuecli3.0之后，改成了通过上下键和空格键来选择和确认安装项了，mac直接忽略下面这一段废话，直接看选项选择即可，windows需要注意，贴图-.-

20191105163915.png

上面，我们用的是 windows下的 git终端来进行操作，发现上下键并没有什么L用，更不用提空格来选择了，因此我们可以用windows自带的powershell 在要创建应用的文件夹中，按住shift+鼠标右键就会出现在此处打开powershell窗口或者在此处打开命令窗口，然后移动鼠标点击打开，或者通过窗口键+R键输入cmd，打开终端也行，使用d:或者e:或者c:这种磁盘名称加冒号的形式就可以切换磁盘位置，看下图powershell终端创建

20191105165548.png

使用powershell来创建应用，这时候，我们会发现上下键是可用的，直接可进行选择，我们这一步选择第二项，第二项是进行手动选择功能，然后回车进入下一步

20191105170611.png

选择安装项，通过上下键来选择，通过空格键来确认，我选择了上图这些我需要用到的，然后回车，下面是对选项的一个解释，

1 ? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection)
2 >( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 
3  ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
4  ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
5  ( ) Router // vue-router（vue路由）
6  ( ) Vuex // vuex（vue的状态管理模式）
7  ( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
8  ( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
9  ( ) Unit Testing // 单元测试（unit tests）10 ( ) E2E Testing // e2e（end to end） 测试

到这一步基本快完成了，选择你用的css预编译器，如何存放配置，是否确认本次配置等等，这些英文看不懂查下就行，或者看心情来，该yes的就y该no的就n，看不懂的就回车，如下图

20191105172048.png

项目生成及依赖下载中

1.png

依赖下载完成，按照提示运行项目

20191105184141.png

到这里，使用vue-cli4.0就完成了一个应用的生成了，目录文件和之前版本有所差别，但是不是特别大，如果要做跨域代理，或者webpack的一些配置，可以在根目录创建一个vue.config.js进行配置！