Initialize the build project

1. Create a project
npm install -g @vue/cli
vue create my-project
Copy the code
2. Default configuration/user-defined configuration
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features
Copy the code
3. Custom configuration: Select required plug-ins and compilation tools

Tips: Up and down + space bar can be selected

(*) Choose Vue version (*) Babel (*) TypeScript (*) Progressive Web App (PWA) Support (*) Router (*) Vuex (*) CSS Pre-processors (*) Linter/Formatter () Unit Testing () E2E Testing Babel - Progressive web site [https://www.jianshu.com/p/7845a13a67d7] CSS Pre - processors - CSS Pre compiler Linter/Formatter - code formatting Unit Testing - Write E2E Testing for unit testsCopy the code
? Use class-style component syntax? (Y/n) # Whether to use the class style for component development Yes? Use Babel alongside TypeScript for auto-detected polyfills? Yes # Compile conversion of TypeScript code using Babel? Use history mode for router? (Requires proper server setup for index fallback in production) Yes # select CSS precompile, here we choose lessCopy the code
# Select code formatting configuration? Pick a linter / formatter config: (Use arrow keys) ESLint with error Prevention only [Error prevention] ESLint + Airbnb config [Airbnb config] ESLint + Standard config > ESLint + Prettier [recommended] TSLint (deprecated) > Lint on save Check Lint and fix on Commit Check during the commitCopy the code
Babel,ESlint, etc.? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) > In dedicated config files In package.jsonCopy the code
4. Run
npm run serve
Copy the code
5. Coding style

IO /docs/en/ Ind add.prettierrc.js to the root of the project, formatting it in a custom style: prettier.io/docs/en/ind

Module. exports = {printWidth: 120, // tabWidth: 2, // tabWidth: 2, // tabetabs: false, // whether to use TAB to indentate singleQuote: True, // Whether strings use single quotes semi: true, // Whether lines end with semicolons (default: true) trailingComma: 'None ', // Whether strings end with comma bracketSpacing: {foo: bar} endOfLine:"auto" // Reserved for Windows and Unix newlines}Copy the code

2. Modify basic configurations

Assets: static resources used in pages and components, such as public style files, font files, images, etc. The difference between this folder and public is that the resources in this folder are compiled by Webpack. Browserslistrc: files are used to set the browser version range for developers. .eslintrc.js: eslint configuration file; .gitignore: files to be ignored by Git; .prettierrc.js: a configuration tool for Babel that uses a custom formatting style in conjunction with ESLint; Package-lock. json: Records the relationship and version between dependencies in the project, to prevent the NPM package from not complying with the specification of "the same library package with the same large version number and its interface meets the compatible requirements", resulting in project operation errors. Package. json: describes the project, including the project name, dependent version, author, command, and import file. Readme. md: project description document, project introduction, License, and some commands (such as startup commands, package commands, and unit test commands) vue.build.js Vue.config. js User-defined configurationCopy the code
1. Differences between VUE-CLI3 and VUE-CLI2:
  • The config file directory and build folder are removed. If you need to customize the configuration, you need to create the vue.config.js file
  • Static resources are moved to the public directory. You can use /xx.xx to access static resources, and move index.html to public
  • The views folder has been added to the SRC folder for sorting view components and public components
  • The Node-Model folder is automatically downloaded when the project is installed
2. Configure vue.config.js

Solution: Set up proxy, package configuration, path alias, global import style

Vue CLI: https://cli.vuejs.org/zh/config/#productionsourcemap Vue is added in the project root directory. The config. Js file, not under the SRC, it will be @ Vue/CLI - service load automatically.Copy the code
Const path = require('path') const resolve = (dir) => path.join(__dirname, dir) // module.exports = {// build multipage applications, Pages: Entry (), publicPath: "/", outputDir: "dist", assetsDir: "", indexPath: "index.html", filenameHashing: true, lintOnSave: false, runtimeCompiler: false, transpileDependencies: [], productionSourceMap: True, // Configure alias chainWebpack: (config) => { config.resolve.alias .set('@', resolve('src')) .set('assets', resolve('src/assets')) .set('components', resolve('src/components')) .set('router', resolve('src/router')) .set('utils', resolve('src/utils')) .set('store', resolve('src/store')) .set('views', resolve('src/views')) }, parallel: require("os").cpus().length > 1, pwa: // devServer: {host: "0.0.0.0", port: 8080, HTTPS: false, open: true, // devServer: {"/ API ": {target: "Https://mock.yonyoucloud.com/mock/5708", ws: true, / / agent web sockets changeOrigin: true, / / allow web sockets cross-domain pathRewrite: {"^/ API ": ""}}}}, // pluginOptions: {foo: {}}, // CSS configuration items CSS: {loaderOptions: {// Pass sass: {prependData: '@import "@/assets/ CSS /common.scss"; @import "@/assets/css/mixin.scss"; @import "@/assets/css/reset.scss"; @import "@/assets/css/var.scss"; '}}},};Copy the code
AssetsDir: Directory for storing generated static resources (JS, CSS, img, fonts) indexPath: directory for storing generated static resources (js, CSS, img, fonts) FilenameHashing: filename includes hash for better cache control lintOnSave: Lets Lint errors appear directly in the browser at development time runtimeCompiler: False, transpileDependencies: babel-loader ignores all files in node_modules productionSourceMap: specifies whether the source map of the production environment is requiredCopy the code
3. Modify package.json
// Modify the specified package command "build": "node vue.build.js"Copy the code

Three, more concepts

1. SPA and MPA(multiple pages)
Subcontracting scheme of the old version: Based on vue - build more cli module and each module independent packaging projects https://segmentfault.com/a/1190000014571631 address https://github.com/shuidian/vue-multipageCopy the code

SinglePage Web Application (SPA)

Composition: a shell page and multiple page fragments refresh method: page partial refresh or change transition animation: easy to achieve data transfer: data transferCopy the code

MultiPage Application (MPA)

Composition: multiple complete pages constitute refresh mode: whole page refresh Transition animation: data transfer cannot be realized: rely on URL parameter transfer, or cookie, localStorage, etcCopy the code

Juejin. Cn/post / 691343…

2. PWA progressive Web

Supplement: Vue project PWA [registerServiceWorker. Js file] www.jianshu.com/p/7845a13a6…