vue/cli创建项目

安装

全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它，否则跳过此步：

npm uninstall vue-cli -g

Vue CLI 3需要 nodeJs ≥ 8.9，查看版本，低于8.9则升级：

node -v
v11.5.0

全局安装@vue/cli（Vue CLI 3的包名称由 vue-cli 改成了 @vue/cli）

npm install -g @vue/cli

查看是否安装成功：

vue -V
@vue/cli 4.1.2

创建项目

进入你要搭建项目的目录，使用命令：

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

首先，会提示一个预设：

? Please pick a preset: (Use arrow keys)
> default (babel, eslint) //默认设置（直接enter）非常适合快速创建一个新项目的原型，没有带任何辅助功能的 npm包
  Manually select features//自定义配置（按方向键 ↓）是我们所需要的面向生产的项目，提供可选功能的 npm 包

我们手动选择默认，项目目录生成：

├── node_modules/                  # 依赖包；
├── public/                        # 静态资源，不经过打包；
│   ├── favicon.ico                # 图标
│   ├── index.html                 # html入口
├── src/                           # 资源；
│   ├── assets/                    # 图片等资源，需要打包
│   ├── components/                # 组件
│   ├── App.vue                    # 根组件；
│   ├── main.js                    # 入口；
├── package.json                   # 包文件；

项目配置

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

这个文件应该导出一个包含了选项的对象：

const isProduct = process.env.NODE_ENV === 'production'
module.exports = {
  publicPath:'',//打包部署时的路径
  outputDir:'dist',// 生产环境构建目录
  assetsDir:'',// 生成静态资源的目录
  indexPath:'index.html',// 输出路径
  pages:{
    // 入口配置
    index:{
      entry:'src/main.js',// 入口
      template:'public/index.html',// 模板
      filename:'index.html',
      title:'vue3',
      chunks:['chunk-vendors','chunk-common','index']
    },
    // subpage:'src/subpage/main.js'
  },
  lintOnSave:true,// 是否在保存的时候检查，这个值会在 @vue/cli-plugin-eslint 被安装之后生效。
  productionSourceMap:true,// 生成环境是否生成sourceMap
  css:{
    extract:isProduct,//是否使用css分离插件
    sourceMap:false,// 是否开启css sourcemap
    loaderOptions:{},// css配置
    requireModuleExtension:true,//启用css modules
  },
  devServer:{// 开发配置
    host:'localhost',
    port:8080,
    https:false,
    hotOnly:false,
    open:true,// 是否自动打开浏览器
    // proxy:{},// 代理
  },
  pluginOptions:{// 第三方插件配置

  }
}

从零开始搭建

敬请期待。。