vue cli4.0 搭建项目详解

要用vue cli4.0搭建项目了，默认就是node环境，vue环境都配置完毕啦，如果没有需要环境搞搞好先。

1.进入要创建项目的目录

项目所在文件夹

vue cli4和之前创建项目的语法不一样了哦
vue2创建项目命令：

vue init webpack  项目名称

vue cli4创建项目命令：

vue create 项目名称

创建命令

2.创建完成后，选择要安装哪些配置项

配置项可以默认安装也可以选择安装

配置项安装

我选择手动配置

手动配置

通过↑ ↓ 箭头选择你要配置的项，按 空格 是选中，按 a 是全选，按 i 是反选,空格来选中取消

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

根据步骤以及需要一步步完成配置项选择，回车等待安装就好。

3.安装完成运行项目就可以啦

运行命令：npm run serve

运行结果

4.可以通过vue的GUI界面来管理自己的项目

GUI界面命令 vue ui

5.vue cli4运行项目后不会自动打开浏览器，需要配置

-方法一：package.json中scripts下的serve中添加 --open

  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

-方法二：在vue.config.js 配置文件中 添加 open：true

 devServer: {
        open: true
    }

注意：第一种的优先级高于第二种，例如 package.json文件中设置了- -open ，在vue.config.js中配置了 open：false ，浏览器依然会自动弹出