1. Development tool - VS Code

Choose VS Code because it is an easy tool to use. Each function found in VS Code completes an excellent job. It has built some simple function sets, including syntax highlighting, intelligent completion, integrated git and built-in debugging tools in the editor, which will make your development more efficient.

Download address

Official website: https://code.visualstudio.com/

Recommended plug-ins

• Vetur - syntax highlighting, intelligent perception, Emmet, etc
• Vue VSCode Snippets - quickly generate Vue templates
• EsLint -- syntax error correction
• Auto Close Tag -- automatically close HTML/XML tags
• Auto Rename Tag - automatically complete the synchronous modification of the tag on the other side
• Path Intellisense - automatic road reinforcement
• Bracket Pair Colorizer -- add a bright color to the brackets in the code

You can find the documentation about the extension here:

https://code.visualstudio.com/docs/extensions/overview

2. Install node js

Node.js is a JavaScript running environment based on Chrome V8 engine. Node.js uses an event driven, non blocking I/O model.

Download address

Official website: https://nodejs.org/en/ (all the way to next)

After installation, you can view the corresponding versions of node and npm on the console

node -v
npm -v

Taobao permanent image command:

npm config set registry https://registry.npm.taobao.org

3. Install Vue devtools

vue devtools is a plug-in based on chrome browser, which is used to debug vue applications, which can greatly improve our debugging efficiency. Next, let's introduce the installation of vue devtools.

Installation mode

Method 1: direct installation in chrome store

Vue devtools can be downloaded and installed directly from the chrome store

Mode 2: manual installation

① Find the github project of Vue devtools and clone it locally vue-devtools

   git clone https://github.com/vuejs/vue-devtools.git

② Install the npm package required by the project

    npm install

③ Compile project files

    npm run build

④ Add to chrome browser

Browser input address“ chrome://extensions/ "Enter the extension program page and click" load the decompressed extension program "Button, select the chrome folder under Vue devtools > shells.

If you don't see "load decompressed extension..." Button, you need to check "developer mode".

Method 2: provide a download address of version 4.1.4

Link: https://pan.baidu.com/s/1B1QhnXBvVLnuSFrnDYbs5A

Extraction code: rq9c

Tips

Open the extension program of chrome, drag the downloaded file in and install it.

The installation is successful, as shown in the figure below

Vue devtools use

After installation, you need to close the browser and reopen it before you can use it

After the browser opens the vue item, press F12 and select vue Vue is data-driven, so we can see the corresponding data, which is convenient for us to debug

4. Vue cli installation and use

Install Vue cli

 npm install @vue/cli -g

Create a project

 vue create <Project Name>   //The file name does not support humps (including uppercase letters)

The specific operations are as follows:

1. Select a preset

① Except for the last two options, the other options are the preset configuration you saved before (as shown in the figure below, the first "my default" is the preset configuration you saved before, which can be used directly now)

② If no configuration has been saved, there are only two options:

Default (babel, eslint): the default setting (direct enter) is suitable for quickly creating a prototype of a new project without any auxiliary npm package
Manually select features: user defined configuration (press the arrow key ↓) is a production oriented project we need, and an npm package that provides optional functions

2. To customize the configuration, you need to select the configuration items you need

? Check the features needed for your project:
>( ) Babel //Transcoder, which can convert ES6 code into ES5 code for execution in the existing environment.
( ) TypeScript// TypeScript is a superset of JavaScript (suffix. js) (suffix. ts). It contains and extends the syntax of JavaScript. It needs to be compiled and output as JavaScript to run in the browser. At present, it is rarely used
( ) Progressive Web App (PWA) Support// Progressive Web application
( ) Router // vue router
( ) Vuex // vuex (state management mode of vue)
( ) CSS Pre-processors // CSS preprocessor (e.g. less, sass, stylus)
( ) Linter / Formatter // Code style checking and formatting (e.g. ESlint)
( ) Unit Testing // unit tests
( ) E2E Testing // e2e (end to end) test

3. Select the specific toolkit for the corresponding function

① Use history router

Vue router uses the features of the browser's own hash mode and history mode to realize front-end routing (by calling the interface provided by the browser)

② css preprocessor

It mainly solves the problems of browser compatibility and CSS code simplification for CSS

③ ESLint:

A plug-in javascript code detection tool is provided. ESLint + Prettier / / is widely used

④ When to detect: check the link when saving or submitting

unit testing

? Pick a unit testing solution: (Use arrow keys)
  Mocha + Chai   //mocha is flexible and only provides a simple test structure. If other functions are required, other libraries / plug-ins need to be added. Must be installed in a global environment
 > Jest   //The installation configuration is simple and easy to use. Built in Istanbul, you can view the test coverage. Compared with Mocha, it has simple configuration, simple test code, easy integration with babel and rich expect

⑤ How to store configuration:

⑥ Whether to save this configuration (y: record this configuration, and then you need to give a name; n: do not record this configuration)

⑦ Completion of Construction: start the project according to the prompt

Visualization project

vue ui

directory structure

|-- src             // Source directory

|  |-- components   // vue common component

|  |-- router       // Route management of vue

|  |-- App.vue      // Page entry file

|  |-- main.js      // Program entry file to load various public components

|-- public          // Static files, such as some pictures, json data, etc

|  |-- favicon.ico   // Icon file

|  |-- index.html   // Entry page

|-- vue.config.js    // Is an optional configuration file that contains most of the vue project configurations

|-- .babelrc        // ES6 syntax compilation configuration

|-- .editorconfig   // Define code format

|-- .gitignore      // File format to be ignored for git upload

|-- .postcsssrc     // postcss profile

|-- README.md       // Project description

|-- package.json    // Project basic information, package dependency information, etc

Create a new Vue under the root directory as needed config. JS self configuration, eg: (simple configuration, see the official website for more configuration details: https://cli.vuejs.org/zh/config/)

module.exports = {
  baseUrl: '/',// The root path when deploying the application (default '/'), or the relative path can be used (there are usage restrictions)
  outputDir: 'dist',// When the build environment is run, the files generated by DIS will be cleared (default '')
  assetsDir: '',//The directory (relative to outputDir) where the generated static resources (s, css, img, fonts) are placed (default '')
  indexPath: 'index.html',//Specify the generated index The output path of HTML (relative to outputDir) can also be an absolute path.
  pages: {//The path and file name configured in pages must exist in your document directory, otherwise an error will be reported when starting the service
    index: {//It is optional except entry
      entry: 'src/index/main.js',// Page entry. Each "page" should have a corresponding JavaScript entry file
      template: 'public/index.html',// Template source
      filename: 'index.html',// In dist / index HTML output
      title: 'Index Page',// When using the title option, use in the template: < title > <% = htmlwebpackplugin options. title %></title>
      chunks: ['chunk-vendors', 'chunk-common', 'index'] // By default, the blocks included in this page will include the extracted general chunks and vendor chunk s
    },
    subpage: 'src/subpage/main.js'//Official explanation: when using the entry only string format, the template will be deduced as' public / subpage HTML ', if not found, go back to' public / index HTML ', the output file name will be deduced as' subpage html'
  },
  lintOnSave: true,// Check when saving
  productionSourceMap: true,// Does the production environment generate sourceMap files
  css: {
    extract: true,// Whether to use the css separation plug-in ExtractTextPlugin
    sourceMap: false,// Open CSS source maps
    loaderOptions: {},// css preset configuration item
    modules: false// Enable CSS modules for all CSS / pre processor files
  },
  devServer: {// Environment configuration
    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: false,
    open: true, //Configure auto launch browser
    proxy: {// Configure multiple proxies (configure one proxy: 'http://localhost:4000 ' )
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  },
  pluginOptions: {// Third party plug-in configuration
    // ...
  }
};

vue dependent installation commands

npm install axios --save-dev //Install axios
npm install mockjs --save-dev   //Install mockjs
npm install vue-lazyload --save-dev    //Installing Vue lazload
npm install vue-cookie --save-dev     //Install Vue cookies
npm install element-ui --save-dev   //Install element UI
npm i vue-lazyload element-ui node-sass sass-loader vue-awesome-swiper vue-axios vue-cookie --save-dev  //Install multiple dependencies at once