The scaffold

Scaffolding helps us deal with webpack and other related configurations. We just need to quickly build a project based on scaffolding (the project must contain webpack related configurations).

Vue Scaffolding VUE – CLI

The first step in using anything is installation

1. Installation of scaffolding (general installation in the global)

$NPM install @vue/cli -g //=> Install $YARN Global add @vue/cliCopy the code

$vue –version $vue –version $vue –version $vue –version

2. Create engineering projects

$vue create [project name](Follow the NPM package name specification: numbers or lowercase letters)Copy the code

The first item is the configuration I created and saved earlier, and the second and third items if it was created for the first time

  • Default (Babel, esLint) : Select default configuration items (install required modules and configure them yourself later)
  • Manually select features: Manually select configuration items

This article makes no sense if you choose default, so we choose to manually select the configuration items

Here select webPack configuration in scaffolding, space bar is select, I select the above items, add or subtract if necessary

  • Babel (babel-PRESET – VUE-app) : babel-preset-env latest ECMAScript features, conversion vue JSX conversion generator, async/await, etc
  • Router: Indicates the official route manager of Vue
  • Vuex: Plug-in for common state management in Vue (handling information communication between components)
  • Css pre-processors: Css preprocessors (SASS/LESS/Stylus)
  • Linter/Formatter: ESLint syntax checks
  • Unit Testing: Unit Testing
  • E2E Testing: end-to-end Testing

To determine whether to use the router history mode, select Y. To choose which CSS preprocessor language configuration rules, I use less based on your needs

ESLint+Prettier for automatic code formatting detection I used vscode for ESLint+Prettier

Select the first one to save the configuration for future use

  • The first option is to put the configuration information in a separate file
  • The second item is put in package.json

The created project directory

  • SRC: project development source file
    • Main.js: packaged compiled entry file
    • App.vue: Entry file for the project page
    • Components: Holds the common components of the current project
      • xxx.vue
    • Assets: Stores static resource files that need to be imported in a project
      • xxx.png
      • xxx.css
  • public
    • Index.html: the main page of the current project, we finally put all the content written in SRC, compiled and rendered by Webpack, vue, and finally rendered in the #app container in index.html
    • Xxx. xx: Sometimes some of our resources may need to be referenced in index. HTML alone and placed in this folder, but for development purposes it is recommended that all but these resources be placed in the SRC folder

In development mode we start a local service to preview webpack-based content based on the following command

$npm run serve 或者 $yarn serve
Copy the code

In production mode, the written content is compiled, packaged, and finally deployed to the server

$npm run build 或者 $yarn build
Copy the code

Vue-other cli commands

$vue inspect to view the default Webpack configuration information of the current project $vue add [plugin] Installs the plug-in in the current projectCopy the code

$Vue UI: Create and manage projects with a graphical interface

A browser window opens and a graphical interface takes you through the project creation process

$vue create –help: You can view commands in vue

Vue-a little deeper into the CLI

After creating the project, the default configuration, such as: less/sass rules have been configured. If we need to use less in the project, there is no need to configure the rules, just need to install the corresponding module and loader

$yarn add less less-loader -d <script> impoer './ XXX /xxx.xx' //=> Import required modules </script> <style lang="less">..... / </style>Copy the code

Modify the default WebPack configuration

  • You need to create a vue.config.js file in the root directory to modify the configuration. The following code is used to modify the configuration of WebPack
Module.exports = {//=>process.env.NODE_ENV: Whether the environment variable stores the development or production environment publicPath: process.env.node_env ==='production' ? 'http://www.xxx.cn/' : '/', //=>outputDir //=> custom directory name, to generate JS/CSS/ image static resources into this directory:'assets', //=> disable resource mapping in production environment (xxx.js.map file is not created in production environment)false{plugins: []}, //=> modify the built-in webPack configuration item chainWebpack directly: Config => {//=>config: original configuration information object config.module. rule('images')
			.use('url-loader')
			.loader('url-loader')
			.tap(options => {
				options.limit = 200 * 1024;
				returnoptions; }); }, / / = > modify webpack - dev - server configuration (especially the cross-domain agent) devServer: {proxy: {/ request/address/user/add/http://api.xxx.cn/user/add/agent address"/": {
				changeOrigin: true,
				target: "http://api.xxx.cn/"}}, //=> parallel: require('os').cpus().length > 1
    }
    
Copy the code

The last

  • Are there any inaccuracies you’d like to point out