官方文档

https://cli.vuejs.org/zh/

参考

https://www.jianshu.com/p/fc94ad12cb9a

https://www.chensheng.group/2019/12/18/113-vue-cli4.0%E5%AD%A6%E4%B9%A0/

前提条件

安装node.js

下载地址：https://nodejs.org/en/download/

(npm会在安装node.js时默认安装好)

查看node.js版本

node -v

查看npm版本

npm -v

安装cnpm(淘宝镜像)

npm install -g cnpm --registry=https://registry.npm.taobao.org

( npm install 可简写为 npm i )

将npm改成使用cnpm安装模块

安装webpack

安装方法：打开命令行工具，输入命令行：

npm install webpack -g

npm install  webpack-cli -g

安装成功后输入webpack -v,如果出现相应的版本号，则说明安装成功。

安装vue-cli

全局安装

npm install -g @vue/cli

关于旧版本

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 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

查看vue-cli版本

vue -V
@vue/cli 4.0.5

vue-cli2搭建项目

项目安装

vue init webpack my-project（my-project为项目名,不支持大写字母）

Project name 项目名

Vue build 选择第一个（运行加编译）

vue-router 选择 n （vue的路由）

ESLint 选择 n （代码检测工具，新手建议关闭）

unit tests 选择 n （单元测试工具）

e2e tests 选择n （端到端测试）

模块安装工具 选择npm

可能的报错

Sorry, name can no longer contain capital letters

原因：项目名不支持大写

项目运行

进入项目 根目录下，再运行

cd my-project
npm run dev

运行其他人的项目

#安装依赖
npm install
#运行
npm run dev

项目结构

结构详解

https://my.oschina.net/liuyuantao/blog/883251

.
|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- src                              // 源码目录
|   |-- components                     // vue公共组件
|   |-- store                          // vuex的状态管理
|   |-- App.vue                        // 页面入口文件
|   |-- main.js                        // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|   |-- data                           // 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息

vue-cli3.0/4.0搭建项目

3.0/4.0 的安装过程相同，只是目录结构有变化

项目安装

1.命令行安装

安装命令

vue create my-project

选择配置 默认（default）或者自定义(Manually select features)。

选择自定义配置

选择功能

按空格键选择你需要的功能，选完后按回车

babel：javascript转译器，将最新版的js语法（es6、es7）转换为现阶段浏览器可以兼容的js代码
typescript：使用 TypeScript 书写源码
PWA：渐进式WEB应用
Router：使用vue-router
Vuex：使用vuex
CSS Pre-processors：css预处理器
Linter / Formatter：代码规范标准
Unit Testing：单元测试
E2E Testing：e2e测试

Use history mode for router? ---router是否使用history模式

history需要服务器支持 详情看这儿https://router.vuejs.org/zh/guide/essentials/history-mode.html (opens new window) 这里我就选no

Pick a CSS pre-processor ---css预处理器的选择

Pick a linter / formatter config ---代码格式化检测选择（这里选择 ESLint + Prettier）

Pick additional lint features ---是否保存配置

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

----关于Babel, PostCSS, ESLint, etc.这些配置文件你是想放在package.json里面还是单独放在外面

（编辑器一般默认会在项目根目录下寻找配置文件，这里我就直接回车选择In dedicated config files）

Save this as a preset for future projects?

--- 是否保存为未来项目的预配置吗？

2.图形化安装

执行npm命令
vue ui
访问 http://localhost:8000 你就可以创建，管理，导入项目

项目运行

npm run serve

由于vue3.0取消了以前的那些配置文件,所以我们需要在根目录自己创建一个vue.config.js

const path = require('path');

module.exports = {
  publicPath: './',
  // 输出文件目录,默认就是dist
  outputDir: process.env.NODE_ENV === "test" ? 'distTest' : 'distPro',
  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  assetsDir: 'static',
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  // 配置es-link true,'error'
  lintOnSave: true,
  css: {  // 一次配置，全局使用，这个scss 因为每个文件都要引入
    loaderOptions: {
      sass: {
        prependData: `@import "./src/assets/css/index.scss";`
      }
    }
  },
  // webpack-dev-server 相关配置
  devServer: {
    // 可以通过设置让浏览器 overlay 同时显示警告和错误：
    overlay: {
      warnings: false,
      errors: false
    },
    open: false,
    host: 'localhost',
    port: 8080,
    https: false,
    proxy: {
      '/mgr': {
        target: 'https://api.douban.com',
        ws: true,
        changeOrigin: true,
        pathRewrite:{
          '^/mgr': ''
        }
      }
    }
  },
  configureWebpack:{  // 覆盖webpack默认配置的都在这里
    resolve:{   // 配置解析别名
      alias:{
        '@': path.resolve(__dirname, './src')
      } 
    }
  }
}