Some new features of Vue3.0

install first

npm install -g @vue/cli
安装完成后查看版本
vue --V

create project

Regarding project creation, in addition to command creation 3.x, a graphical interface is added to create and manage vue projects.
When creating a new project, you can also mix and choose a variety of integrated
TypeScript
PWA
Vue Router & Vuex
ESLint / TSLint / Prettier Units
with Jest or Mocha Test
E2E test with Cypress or Nightwatch

command creation

	vue create app

1. Use the up and down arrows to select the default setting or manually select the function

	Vue CLI v3.0.3
	? Please pick a preset:
	  default (babel, eslint)
	> Manually select features

2. Press the space bar to select the function you need, then press Enter

	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测试
	Vue CLI v3.0.3
	? Please pick a preset: Manually select features
	? Check the features needed for your project:
	 (*) Babel
	 ( ) TypeScript
	 ( ) Progressive Web App (PWA) Support
	 (*) Router
	 (*) Vuex

3. Router's history mode, history needs server support, click to view details
4, css preprocessor selection
5, code formatting detection selection
6, about Babel, PostCSS, ESLint these configuration files you want to put in package.json Or put it outside alone, the editor will generally look for the configuration file in the project root directory by default.
7. Whether to save it as a pre-configuration for future projects, you can choose to press Enter directly

The configuration is as follows

Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes

GUI

Simple operation, direct execution of commands

vue ui

Briefly tell me about the new features

node_modules
public
src
.browserslistrc
.eslintrc.js
.gitignore
babel.config.js
package.json
postcss.config.js
README.md

The above is the root directory of the project. Compared with 2.x, the file structure of 3.x is significantly simplified. There is an additional public folder for storing static files, and a series of configuration files such as config and build are missing. These configuration files are all placed Under the node_modules@vue file

.browserslist

There is an additional .browserslist file in the root directory, which can specify the scope of the target browser of the project. It is
used for translating JavaScript features and adding CSS browser prefixes, which can reduce compatible code and improve code quality.
If you want one less file, you can also add it to the package Add browserslist field in .json, the parameter is an array

Use npx browserslist to view the browser compatibility of the project,
just put the browser parameters that need to be supported in the file

modern model

In order to be compatible with browsers that do not support the new features of js, we need Babel translation, 3.x provides a new modern mode

npx vue-cli-service build --modern

This command will generate two versions of the application: a modern version of the package for modern browsers that support ES modules, and an old version of the package for old browsers that do not support it and does not require us to manually deploy it, which is very
practical

Modern packages are loaded via <script type="module"> in supported browsers; they are also preloaded using <link rel="modulepreload">
Legacy packages will be loaded via <script nomodule> and will be ignored by browsers that support ES modules

install plugin

Install the plugin in the created project, use the vue add command

view-cli

In the Vue CLI project, @vue/cli-service installs a command named vue-cli-service.
You can access this command in npm scripts as vue-cli-service, or from the terminal as ./node_modules/.bin/vue-cli-service. The
Vue CLI project has three modes: development mode for startup and production mode for Packaging and e2e testing, test mode is used for unit testing

启动
vue-cli-service serve
  open    服务器启动时打开浏览器
  copy    服务器启动时将 URL 复制到剪切版
  mode    指定环境模式 默认：development
  host    指定 host 默认：0.0.0.0
  port    指定 port 默认：8080
  https   使用 https 默认：false

打包
vue-cli-service build

  --modern 使用现代模式构建应用，为现代浏览器交付原生支持的 ES2015 代码，并生成一个兼容老浏览器的包用来自动回退。
  --target 允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标。
  --report 和 --report-json 会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小

测试
 vue-cli-service test:e2e  端到端测试
 vue-cli-service test:unit  单元测试

configuration problem

If you want to pass in shared global variables in the Sass style,
you need to create a new config.js in the root directory and add the following configuration

module.exports = {
    
    
  css: {
    
    
    loaderOptions: {
    
    
      // 给 sass-loader 传递选项
      sass: {
    
    
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: `@import "@/variables.scss";`
      }
    }
  }
}

Path problem after packaging

Add 'baseUrl: './'' to the vue.config.js file

module.exports = {
    
    
    baseUrl: './'
}