vue-cli3.0 own collection

 When my possession notes do not misunderstand.

Up and down arrow keys to move, Space to select, Enter OK 

[Update 2018-07-31]: vue-cli 3.0 official Chinese version of the document has come out, in detail can refer to: https://cli.vuejs.org/zh/guide/
about the other basics Vue, you can see my article (update):
1. Vue entry (1) - Introduction and installation

Vue CLI Introduction

Vue CLI is a complete system based on Vue.js rapid development, provides:

• By @ vue / cli build interactive project scaffolding.
• By @ vue cli + @ vue / cli-service-global fast start zero-configuration / prototyping.
• Dependent (@ vue / cli-service) a run-time, the dependency:
  • Can be upgraded;
  • Based webpack constructed, and with a reasonable default configuration;
  • It can be configured via the configuration file in the project;
  • It can be extended via plug-ins.
  • A rich collection of official plug-in, integrated front-end ecological best tool.

Vue CLI is committed to standardize basic tools Vue Ecology. It ensures that the various building tools can be based on the default configuration intelligence can smooth convergence, so you can focus on writing applications, without having to spend several days to issue tangled configuration. At the same time, it also provides the flexibility to adjust the configuration for each tool, without having to eject

1. Preparing the Environment

1.1. Installing Node.js (LTS version is recommended)

1.2. Npm registry settings and installation nrm

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

View available npm source

nrm ls

nrm View npm source .png

Npm source switching (to use taobao Example)

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

nrm handover source npm .png

1.3. Installation yarn

npm i yarn -g

1.4. Installation vue-cli 3.0

npm i @vue/cli -g

2. vue-cli build script file

Project to build a name for vue-testthe project as an example Vue front end

In the command input terminal

vue create vue-test

Corresponding configuration (in manual configuration example) according to the prompt:

2.1. SelectManually select features

vue-cli-0.png

2.2. Some properties need to select the item (here we chose Babel need to compile, use routing Vue, Vue state manager, CSS pre-processor, code detection and formatting, as well as unit testing, not to consider end to end testing (E2E Testing))

vue-cli-1.png

2.3. Select the CSS preprocessor language, here choose LESS

vue-cli-2.png

2.4. ESLint specification of selection code, the code used here Standard Specification

vue-cli-3.png

2.5. Choose when code detection, detect when Select Save

vue-cli-4.png

2.6. The selection unit test solution, selected here Jest

vue-cli-5.png

2.7 Choosing Babel, PostCSS, ESLint like configuration file location is selected here is stored in each individual profile

vue-cli-6.png

2.8 Wait Vue-cli after the completion of initialization configuration

vue-cli-7.png

2.9. Vue-cli after initialization is complete, follow the prompts, enter the vue-test project, and start the project

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

3. vue.config.js Configuration

Introduction 3.1 vue.config.js

Part of this reference Vue-cli Configuration Reference

vue.config.jsIt is an optional configuration file, if the project (and package.json same level) the existence of this file in the root directory, then it will be @vue/cliloaded automatically. You can also use package.jsonthe vuefield, but note that such an approach requires you to strictly comply with JSON format to write.

This file should export the object that contains the options

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

3.2. Configuration Agent

If your front-end applications and back-end API server is not running on the same host, you need the development environment to the API Request Broker API server. This problem can be configured via vue.config.js in devServer.proxy options

devServer

• Type: Object
  all webpack-dev-serveroptions are supported Note:
  • 有些值像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 中的值会被用在配置里的多个地方，以确保所有的部分都能正常工作在一起。

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

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

1. 使用vue-cli创建新的项目
2. 删除新项目中src下的内容
3. 将原有项目src中的源码拷贝到新项目的src中
4. 将原有项目的index.html及favicon.ico拷贝到新项目的public中
5. 将原有的*static文件夹也拷贝到新项目的public中
6. 修改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下即可。