@vue/cli

程序员文章站 2022-07-14 09:27:21

...

Vue脚手架
精简了很多，但还是和vue2.0有很多区别的，基本的用法变化不是特别大

① vuex（状态管理）：

vue cli 2 中：vuex是搭建完成后自己npm install的，并不包括在搭建过程中。可以看到vue cli
2的vuex默认文件夹（store）又包含了三个js文件：action（存放一些调用外部API接口的异步执行的的方法，然后commit
mutations改变mutations 数据）、index（初始化mutations
数据，是store的出口）、mutations（处理数据逻辑的同步执行的方法的集合，Vuex中store数据改变的唯一方法commit
mutations）

vue cli 3 中：vuex是包含在搭建过程供选择的预设。vue cli 3
中默认只用一个store.js代替了原来的store文件夹中的三个js文件。action、mutations、state以及store 的
getters 的用法有很多

② router （路由）：

vue cli 2 ：“ router/index.js ”

vue cli 3：“router.js”（用法和做的事都一样）

③ 去掉 static 、新增 public 文件夹

vue cli 2 ：static 是 webpack 默认存放静态资源的文件夹，打包时会直接复制一份到dist文件夹不会经过
webpack 编译

vue cli 3 ：摒弃 static 新增了 public 。vue cli 3 中“静态资源”两种处理方式：

经webpack 处理：在 JavaScript 被导入或在 template/CSS 中通过“相对路径”被引用的资源会被编译并压缩

不经webpack 处理：放置在 public 目录下或通过绝对路径被引用的资源将会“直接被拷贝”一份，不做任何编译压缩处理

④ index.html ：

vue cli 2 ：“index.html ”

vue cli 3 ：“public/index.html ”此模板会被 html-webpack-plugin 处理的

⑤ src/views：

vue cli 3 的 src文件夹新增 views文件夹用来存放 “页面”，区分 components（组件）

⑥ 去掉 build（根据config中的配置来定义规则）、config（配置不同环境的参数）文件夹：

vue cli 3 中，这些配置你可以通过命令行参数、或 vue.config.js （在根目录新建一个
vue.config.js 同名文件）里的 devServer 字段配置开发服务器

⑦ babel.config.js：

配置Babel 。Vue CLI 使用了 Babel 7 中的新配置格式 babel.config.js。和 .babelrc 或
package.json 中的 babel
字段不同，这个配置文件不会使用基于文件位置的方案，而是会一致地运用到项目根目录以下的所有文件，包括 node_modules
内部的依赖。官方推荐在 Vue CLI 项目中始终使用 babel.config.js 取代其它格式。

⑧ 根目录的一些其他文件的改变：

之前所有的配置文件都在vue create 搭建时preset预设或者后期可以通过命令参数、 vue.config.js 中配置

根据需要在根目录下新建 vue.config.js自行配置，eg：（简单配置，更多配置详情参见官网：https://cli.vuejs.org/zh/config/）

module.exports = {
  baseUrl: '/',// 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
  outputDir: 'dist',// 运行时生成的生产环境构建文件的目录(默认''dist''，构建之前会被清除)
  assetsDir: '',//放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
  indexPath: 'index.html',//指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
  pages: {//pages 里配置的路径和文件名在你的文档目录必须存在 否则启动服务会报错
    index: {//除了 entry 之外都是可选的
      entry: 'src/index/main.js',// page 的入口,每个“page”应该有一个对应的 JavaScript 入口文件
      template: 'public/index.html',// 模板来源
      filename: 'index.html',// 在 dist/index.html 的输出
      title: 'Index Page',// 当使用 title 选项时,在 template 中使用：<title><%= htmlWebpackPlugin.options.title %></title>
      chunks: ['chunk-vendors', 'chunk-common', 'index'] // 在这个页面中包含的块，默认情况下会包含,提取出来的通用 chunk 和 vendor chunk
    },
    subpage: 'src/subpage/main.js'//官方解释：当使用只有入口的字符串格式时,模板会被推导为'public/subpage.html',若找不到就回退到'public/index.html',输出文件名会被推导为'subpage.html'
  },
  lintOnSave: true,// 是否在保存的时候检查
  productionSourceMap: true,// 生产环境是否生成 sourceMap 文件
  css: {
    extract: true,// 是否使用css分离插件 ExtractTextPlugin
    sourceMap: false,// 开启 CSS source maps
    loaderOptions: {},// css预设器配置项
    modules: false// 启用 CSS modules for all css / pre-processor files.
  },
  devServer: {// 环境配置
    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: false,
    open: true, //配置自动启动浏览器
    proxy: {// 配置多个代理(配置一个 proxy: 'http://localhost:4000' )
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  },
  pluginOptions: {// 第三方插件配置
    // ...
  }
};

这里有一篇关于vue-cli3的全面配置的文章供大家参考，
文章
https://segmentfault.com/a/1190000017008697
https://www.cnblogs.com/coober/p/10875647.html
https://www.cnblogs.com/vsmart/p/10399919.html

Vue CLI介绍
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

通过 @vue/cli 搭建交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：

可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject

环境准备
1.1. 安装Node.js （建议使用LTS版本）
1.2. nrm安装及npm registry设置

// use npm
npm i nrm -g
// use yarn
yarn global add nrm

查看可用的npm源

nrm ls

@vue/cli

nrm查看npm源.png

切换npm源(以使用taobao为例)

// 用法： nrm use ***
nrm use taobao
// 切换之后可用 nrm ls查看是否已经切换了npm源

@vue/cli

nrm切换npm源.png

1.3. 安装yarn

npm i yarn -g

1.4. 安装vue-cli 3.0

npm i @vue/cli -g

vue-cli搭建脚本文件

以搭建一个项目名称为vue-test的Vue前端项目为例

在终端输入以下命令

vue create vue-test

根据提示进行相应的配置（以手动配置为例）：
2.1. 选择Manually select features
@vue/cli
vue-cli-0.png

2.2. 选择项目需要的一些特性（此处我们选择需要Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化、以及单元测试，暂时不考虑端到端测试(E2E Testing)）
@vue/cli

? 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） 测试

Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）
2.3. 选择CSS预处理器语言，此处选择LESS @vue/cli
vue-cli-2.png

2.4. 选择ESLint的代码规范，此处使用 Standard代码规范
@vue/cli
vue-cli-3.png

2.5. 选择何时进行代码检测，此处选择在保存时进行检测
@vue/cli
vue-cli-4.png

2.6. 选择单元测试解决方案，此处选择 Jest
@vue/cli
vue-cli-5.png

2.7. 选择 Babel、PostCSS、ESLint等配置文件存放位置，此处选择单独保存在各自的配置文件中
@vue/cli
vue-cli-6.png

2.8. 配置完成后等待Vue-cli完成初始化
@vue/cli
vue-cli-7.png

2.9. vue-cli初始化完成后，根据提示，进入到vue-test项目中，并启动项目

// 进入到vue-test项目
cd vue-test
// - 启动服务
yarn serve
// - 打包编译
yarn build
// - 执行lint
yarn lint
// - 执行单元测试
yarn test:unit

vue.config.js配置
3.1 vue.config.js介绍
此部分内容参考Vue-cli配置参考

vue.config.js是一个可选的配置文件，如果项目的（和package.json同级的）根目录中存在这个文件，那么它会被@vue/cli自动加载。你也可以使用package.json中的vue字段，但是注意这种写法需要你严格遵照JSON的格式来写。

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

// vue.config.js
module.exports = {
  // 选项...
}

3.2. 配置代理

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过
vue.config.js 中的 devServer.proxy 选项来配置

devServer

Type: Object
所有webpack-dev-server的选项都支持.注意：

有些值像host、port和https可能会被命令行参数覆写
有些像publicPath和historyApiFallback不应该被修改，因为它们需要和开发服务器的baseUrl同步以保障正常工作

devServer.proxy

Type:string | object
devServer.proxy可以是一个指向开发环境API服务器的字符串：

module.exports = { devServer: {
proxy: ‘http://localhost:4000’ } }

这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。
如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware 。
vue-cli2.0创建的项目的代理配置方式是修改config/index.js文件中的proxyTable:

image.png

vue-cli3.0的代理配置，直接将proxyTable中配置copy到devServer.proxy中即可：

module.exports = {
  devServer: {
    proxy: {
     '/hrm/api': {
        //target: 'http://192.168.1.209:10751/', // Dev环境
        //  target: 'http://192.168.1.238:10751/', // Test环境
        // target: 'http://192.168.1.215:10751/', // Rls环境
        target: 'http://192.168.1.218:10751/', // 正式环境
        changeOrigin: true,
        autoRewrite: true,
        cookieDomainRewrite: true,
        pathRewrite: {
          '^/hrm/api/': '/'
        }
      }
    }
  }
}

3.3. 配置Webpack其他选项
参考：webpack简单的配置方式
调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象：

module.exports = {
  // 其他选项...
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
      //......
    ]
  }
}

警告
有些 webpack 选项是基于 vue.config.js 中的值设置的，所以不能直接修改。例如你应该修改 vue.config.js 中的 outputDir 选项而不是修改 output.path；你应该修改 vue.config.js 中的 baseUrl 选项而不是修改 output.publicPath。这样做是因为 vue.config.js 中的值会被用在配置里的多个地方，以确保所有的部分都能正常工作在一起。

升级已有项目到vue-cli 3.0版本

之前有考虑过通过将现有项目进行修改，安装@vue/cli以及相关的包，发现行不通。其实，最简单的方法，就是使用vue-cli 3.0，创建一个新的项目，然后将原有的项目的源码拷到新的项目中即可

使用vue-cli创建新的项目
删除新项目中src下的内容
将原有项目src中的源码拷贝到新项目的src中
将原有项目的index.html及favicon.ico拷贝到新项目的public中
将原有的*static文件夹也拷贝到新项目的public中
修改package.json、.babelrc等文件，保持和原有项目一致即可

build之后静态目录存放位置区别：

vue-cli 2.0
vue-cli 3.0

存放在 dist/static下
存放于 dist/assets 下

注意：
使用vue-cli 2.x版本创建的项目，放在static下的文件，build之后，是会拷贝到dist\static项目下的，所以，也必须要将static文件夹移到新项目的public文件夹中；会有放在static目录的，大部分是一些用于下载的，或者是大的图片、库等不需要编译的
2.0脚手架默认生成的静态文件是放在dist/static下，3.0默认升成的静态文件是放在 dist/assets下的，但是对于项目的升级来说，影响不大

如下图，原有项目的static中的histudy文件夹和wx.zip文件，编译后是会被拷贝到dist/static下的

image.png

vue-cli 3.0创建的项目，放在public目录的，编译时才会被拷贝到dist目录中，具体的配置方法，可以通过vue.config.js去配置，有兴趣的可以去研究研究
如下图：src中的**.vue等文件，编译后生成的 img/css/js文件夹，都会被拷贝到dist/assets中，public中的文件/文件夹会被拷贝到dist目录下。为了不修改原有项目的代码，直接将原项目的static文件夹拷贝到新项目的public下即可。

@vue/cli

@vue/cli

vue2.0 自定义组件的方法（vue组件的封装）

手把手教你vue-cli单页到多页应用的方法

vue 表单输入格式化中文输入法异常问题

vue-cli构建项目下使用微信分享功能

vue2.0+vuex+localStorage代办事项应用实现详解

详解vue-router 命名路由和命名视图

关于vue-router的那些事儿

使用 vue-i18n 切换中英文效果

使用proxytable 配置解决 vue-cli 的跨域请求问题【推荐】

Vue2.0 实现移动端图片上传功能