vue-cli3之初体验，创建一个vue项目

vue-cli3

首先贴上官网地址：https://cli.vuejs.org/guide/
其实也很简单，vue-cli相对于之前的 操作起来更加简洁，少了很多繁琐的操作，简单容易上手，还有ui界面 更是一些喜欢界面操作者的福音。

1.安装vue/cli

1. 如果之前安装的是2.x的，则需要把之前的卸载 npm uninstall vue-cli -g或yarn global remove vue-cli卸载它
2. 另外Vue CLI需要Node.js版本8.9或更高版本（建议使用8.11.0+）。您可以使用nvm或nvm-windows在同一台计算机上管理多个版本的Node 。（这里我直接升级了最新的npm npm install -g npm，至于这个nvm我没有做过多了解，需要管理多个版本的可以了解下）

准备工作做完 就可以安装了，命令如下

npm install -g @vue/cli
# OR
yarn global add @vue/cli

（如果用yarn 命令提示找不到的话 可以 npm install -g yarn 装一下）
等待完成，用vue --version命令查看版本，3.x.x即可

2.创建一个项目（or 运行vue ui 命令 界面化创建）

vue create project-name

即创建项目 系统将提示您选择预设。您可以选择基本Babel + ESLint设置附带的默认预设，也可以选择“手动选择功能”以选择所需的功能。

我们只需要按照自己的需要去选择创建就好了
这里顺便提一下 预设选项的各个含义
这里有一个说明很详细的，贴上地址：https://www.cnblogs.com/adhehe/p/10184851.html 个人觉得很详细，如果对预选设置不知道选什么的 可以看看。

3.项目创建完 之后 启动

启动命令：

npm run serve 
//or 
yarn serve

4.安装插件

命令

vue add 插件名字

5.还有一个比较重要的就是，vue.config.js

vue-cli创建的项目 较之前的项目相比 你会发现简洁了很多

没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件，我们需要配置一些设置的时候要怎么做呢，官方文档写的都有，此处引用官方原话

vue.config.js是一个可选的配置文件，@vue/cli-service如果它存在于您的项目根目录（旁边package.json）中，它将自动加载。您也可以使用该vue字段package.json，但请注意，在这种情况下，您将仅限于JSON兼容值。

一般我们的做法就是，在项目根目录下 新建一个vue.config.js，项目会自动加载 这个文件 设置一些配置信息，

vue.config.js

demo

module.exports = {
  /** 区分打包环境与开发环境
   * process.env.NODE_ENV==='production'  (打包环境)
   * process.env.NODE_ENV==='development' (开发环境)
   * baseUrl: process.env.NODE_ENV==='production' ? "" : '',
   */

//关于baseUrl 官方文档有这么一个说明   自Vue CLI 3.3起不推荐使用，请publicPath改为使用。但其实还可以用baseUrl只是不推荐
baseUrl: process.env.NODE_ENV === 'production' ? '192.168.60.110:8080' : '192.168.60.110:8080',  // 部署应用时的基本 URL
outputDir: 'dist',//  // build 输出文件目录
//assetsDir: '',一个目录（相对于outputDir）嵌套生成的静态资产（js，css，img，fonts）
// indexPath: 'index.html',//指定生成的输出路径index.html（相对于outputDir）。也可以是一条绝对的路径。
filenameHashing: true,// 默认在生成的静态资源文件名中包含hash以控制缓存
// 构建多页面应用，页面的配置
pages: {
  index: {
    // page 的入口
    entry: 'src/index/main.js',
    // 模板来源
    template: 'public/index.html',
    // 在 dist/index.html 的输出
    filename: 'index.html',
    // 当使用 title 选项时，template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
    title: 'Index Page',
    // 在这个页面中包含的块，默认情况下会包含
    // 提取出来的通用 chunk 和 vendor chunk。
    chunks: ['chunk-vendors', 'chunk-common', 'index']
  },
  // 当使用只有入口的字符串格式时，模板会被推导为 `public/subpage.html`，并且如果找不到的话，就回退到 `public/index.html`。
  // 输出文件名会被推导为 `subpage.html`。
  subpage: 'src/subpage/main.js'
},
lintOnSave: process.env.NODE_ENV !== 'production',//是否使用eslint-loader在开发期间执行lint-on-save 。仅在安装时才会考虑此值。默认true
runtimeCompiler: false,是否使用包含运行时编译器的Vue核心的构建。将其设置为true允许您使用templateVue组件中的选项，但会为您的应用带来额外的10kb负载。默认false
transpileDependencies: [],//默认情况下babel-loader忽略其中的所有文件node_modules。如果要使用Babel显式转换依赖关系，可以在此选项中列出它

productionSourceMap: true,// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建，默认true
crossorigin: '', // 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)
integrity: false,//设置为在生成的HTML中true启用子资源完整性（SRI）<link rel="stylesheet">和<script>标记。如果您在CDN上托管构建的文件，最好启用此功能以获得额外的安全性。
configureWebpack: {},//如果值是Object，则它将使用webpack-merge合并到最终配置中。如果值是函数，它将接收已解析的配置作为参数。该函数可以改变配置并返回任何内容，或者返回配置的克隆或合并版本。
chainWebpack: () => { },//将接收ChainableConfig由webpack-chain提供支持的实例的函数。允许对内部webpack配置进行更细粒度的修改。
// css的处理
css: {
  // 当为true时，css文件名可省略 module 默认为 false
  modules: true,
  // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS
  extract: false,//默认值：true在生产中,在开发中是false,将组件中的CSS提取到独立的CSS文件中（而不是在JavaScript中内联并动态注入）。构建为Web组件（样式内联并注入shadowRoot）时，始终禁用此选项。
  // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
  sourceMap: false,
  //向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)
  loaderOptions: { css: {}, less: {} }
},
 parallel: require("os").cpus().length > 1, // PWA 插件相关配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 pwa: {}, // configure webpack-dev-server behavior
 devServer: {
   open: process.platform === "darwin",
   disableHostCheck: false,
   host: "127.0.0.1",
   port: 8080, https: false,
   hotOnly: false, // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
   // proxy: {
   //   '/api': {
   //       target: 'http://192.168.1.156:8999',
   //       ws: true,
   //       changeOrigin: true,
   //       pathRewrite: {
   //         '^/api': ''  //通过pathRewrite重写地址，将前缀/api转为/
   //       } 
   //     }       
   // },
   proxy: 'http://192.168.1.162:9999/api',
   // before: app => {}
 }, // 第三方插件配置
 pluginOptions: {
   // ...
 }
}

6.打包生成dist目录后，如何启动dist目录，对打包后的文件进行本地效果预览

官方api有相关说明，如下

npm install -g serve
# -s flag means serve it in Single-Page Application mode
# which deals with the routing problem below
serve -s dist

需要的朋友可以尝试一下
我采用的是 网上搜到的另一种方法：

1.安装 http-server

npm install http-server -g 全局

2.启动
进入dist目录下 执行：

http-server

启动成功效果如下，在浏览器输入一下其中的地址 就可以本地预览啦