使用Vue-cli4创建Vue项目

一、基础环境配置

1、安装nodejs

2、验证

node --version
npm --version

 二、全局安装脚手架

1、安装

npm install -g @vue/cli

如果升级本地环境，输入npm uninstall -g vue-cli 全局卸载再安装

 2、验证

vue -V

三、搭建项目

1、 跳转到自己喜欢的盘指定目录下，然后创建项目的命令下面

vue create <Project Name> //文件名 不支持驼峰（含大写字母）

2、 选择手动配置还是默认配置

      default  默认配置

      Manually select features  手动配置

      我选手动配置

3、自定义配置看个人项目需求，我的自定义配置如下

说明 

1).TypeScript： 支持使用 TypeScript 进行编码
2).Progressive Web App (PWA) Support： PWA 支持。
3).Route：r 支持 vue-router 。
4).Vuex： 支持 vuex 状态管理。
5).CSS Pre-processors： 支持 CSS 预处理器。
6).Linter / Formatter： 支持代码风格检查和格式化。
7).Unit Testing：支持单元测试。
8).E2E Testing：支持 E2E 测试。

4、这里我选择3.x的版本

5、选择是否使用路由 history router，Y表示使用history模式，N表达使用hash模式（即URL地址里面带有#），我选Y

6、css的预处理，我选择Less ，其实都差不多，实在不行也可以选stylus 原生的

7、选择 ESLint 代码校验规则，提供一个插件化的javascript代码检测工具，我选择ESLint + Prettier

8、选择什么时候进行代码校验

说明
1).Lint on save 保存就检查。
2).Lint and fix on commit   fix 或者 commit 的时候检查 。

这里我选择第一个，稳。

 9、配置文件存放地方

说明
1).In dedicated config files 独立文件夹位置。
2).package.json 在package.json文件中。

我选择第二个

 10、是否记录这次配置，我选择不记录

11、 开始创建项目

四、启动

1、根据提示，进入项目文件里面，输入npm run serve命令启动项目

 2、项目启动成功界面如下：

五、项目目录结构对比 

vue-cli2目录结构

vue-cli4目录结构

1. vue-cli4基于webpack4打造，vue-cli2基于webpack3
2. vue-cli4移除了build、confifig、static文件夹
3. vue-cli4提供vue ui可视化配置
4. 新增public文件夹，将index.html移入了此文件夹
5. 创建项目的命令：vue-cli2命令vue init webpack vue-cli2，vue-cli4命令vue create vue-cli4
6. 项目启动的命令：vue-cli2命令npm run dev，vue-cli4命令vue npm serve

六、自定义配置文件

webpack配置文件没了，可以在根目录下创建vue.config.js文件进行webpack和vue的一些配置

module.exports = {
    // 基本路径
    publicPath: './',
    // 输出文件目录
    outputDir: 'dist',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: false,
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: false,
    devServer: {
        overlay:{
            warning:false,
            errors:false
        },
        open: process.platform === 'darwin',
        host: 'localhost',
        port: 80,
        https: false,
        hotOnly: false,
        proxy: '', 
    },
    // 第三方插件配置
    pluginOptions: {
    // ...
    }
}