Scaffolding: Encapsulate webpacks that need to be configured and things that need to be done every time, based on business or functional requirements, and then install scaffolding later to get these things done quickly

Vue Engineering based on VUe-CLI (cli.vuejs.org/zh/guide/)

Installation and basic use

  • The installation
    • Install NPM i@vue /cli -g
    • $vue create XXX creates the project (XXX project names follow NPM package name rules)
      • Default configuration Default
      • Manually select features
  • File Directory Description
    • Create the component xxx.vue
    • The page template
    • Build a small case API/assets/components/pages/store /…
  • Based on using
    • The development of running
    • Production deployment
  • Webpack content configured by default
    • Configuration is less/sass

The advanced configuration

  • vue.config.js
  • Environment variables and patterns
  • Browser compatibility github.com/browserslis…

.env.development

NODE_ENV = development BASE_URL = "http://127.0.0.1:8080"Copy the code

.env.production

NODE_ENV=production
BASE_URL="http://www.baidu.com"
Copy the code

vue.config.js

// Configure environment variables and modes. Let NODE_ENV = process.env.node_env, BASE_URL = process.env.base_url; Module.exports = {// publicPath = {// publicPath = {// publicPath = {// publicPath = {// publicPath = {// publicPath = {// publicPath = {// publicPath = {// publicPath = {// publicPath = {// publicPath = {// publicPath = {// publicPath = {// publicPath = {// publicPath = { NODE_ENV === "production" ? '/dist/' : '/', // configure multiple pages: {index: {entry: 'SRC /main.js', 'public/index.html', // template source filename: 'index.html', // In the output of dist/index.html, the generated file name // When using the title option, The title of the template tag need to be a % > < % = htmlWebpackPlugin. The options. The title the title: 'Home ', // The blocks contained on this page, by default, will contain // extracted generic chunks and Vendor Chunk chunks: ["chunk-vendors", "chunk-common", "index"]}, login: { entry: 'src/login.js', template: 'public/login.html', filename: 'login.html', chunks: ["chunk-vendors", "chunk-common", "login"]}}, // Are lexical detection performed each time code is compiled in a development environment (vendors, if enabled: The compiler will compile slowly and will not be able to compile later with an extra space in xxx.vue.) lintOnSave: false, // productionSourceMap: // webpack-dev-server devServer: {port: 3000, // proxy: {'/ API ': {target: BASE_URL, changeOrigin: true // Cross-domain request agent}}}};Copy the code

Browser compatibility

  • In the package. The json
"Browserslist ": ["> 0.5%", "last 2 versions"," IE 10-11"]Copy the code
  • In the main. Js/login. Js
/* compatible processing */ import 'core-js/stable'; import 'regenerator-runtime/runtime';Copy the code