I. Project construction

Use vue-cli4.x command line tool to create vue.2. x project

1. Use the leather panel to create the database

Sc delete mysql sc delete mysql is not available

Method 2: task manager netstat ano | findstr searches “3306”

7684 Right-click to end the process

Database: Username and password —-mydb

2. The server is started

Error: Cannot find Module Express is reported when executing the js file. Solution: Execute again in your own project directory: NPM Install Express In the background project directory, press shift and right click, choose PowerShell, enter NPM install Node app.js command — 9000 in the Powershell window

3. Start front-end projects

4. Create project using vue-CLI:

Vue Create shop(project name) 2. Select ve2. X,history[no],less,ESLint standard… Three plug-ins need to be installed: vetur– Identify vUE files esLint —- constraint code prettier—-code formatter 3. NPM run serve

“Eslint” : error “Missing space before function parentheses”

Solution: Add it in the rules area of.eslintrc.js

“space-before-function-paren”: 0

4. Mobile VUE

Optimized fastClick — ios phone loading on demand — webpack (js) dynamic loading — import() function how to fit? Rem.media Flex % libflexable.js

Is adaptive the same as responsive? Not the same? Iphone5 iphone6 Hand-washing adaptation Solution Adaptation: Different screens display the same content responsive: Different screens display different content.

2. Login interface

Analyze the logic of the login page

(1) Enter the correct user name and password on the first login page to log in.

(2) If you Login again, if the Login is not invalid, directly enter the /home page;

(3) Every time you enter home, check whether the invalid token exists or not. The background sends a request to verify whether the token is valid and makes a judgment on the background

Note: HTTP stateless has no memory function, there is no way to record the state

Ways to stay logged in:

1. Cookie —– The server does not record the cookie

When the browser sends a request to the server for the first time, the server gives the browser a cookie and saves it in the browser. The browser carries the cookie every time it visits the server

2.session

The server records sessions, and the browser saves sessions using cookies

3. Token —- Session enhanced version

The browser requests the server, and the server returns the token. Each subsequent request carries the token to the server for verification. Tokens are stored in localStorage or sessionStorage. The token’s encryption method is known only to insiders. The Api is broken.

Components and library files used in the project

Element UI framework

Version used: 2.15.2

Common components in a project

El-menu Side menu

Collapse =”iscollapse”- lists only show subdirectories of the currently clicked list :collapse=”iscollapse

Breadcrumb —– sub-navigation display

El-switch Indicates the status switch

El-switch State switch: <el-table-column label=" status "> <template slot-scope="scope"> <el-switch V-model ="scope.row.mg_state" @change="changeStatus(scope.row.id,scope.row.mg_state)"></el-switch> </template> </el-table-column>Copy the code

@change @click.native=””<===>@change=”changeStatus(id,type)”

Deep depth selector

——less /deep/ th,/deep/ td{text-align: center; } CSS —–>>> Depth selector

Pagination paging

 <el-pagination class="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="cateInfo.pagenum"
      :page-sizes="[1, 5, 10, 15, 20]"
      :page-size="cateInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" background>
    </el-pagination>
Copy the code

Event: @current-change=”handleCurrentChange” Changes the function executed on the current page

@size-change=”handleSizeChange” when changing the display of several data on the current page Note: The display of total needs to be dynamically retrieved from the background

async getCateGoryList() {
      const { data: res } = await this.$http.get('categories', { params: this.cateInfo })
      console.log(res)
      console.log(res.data)
      if (res.meta.status === 200) {
        this.categoryList = res.data.result
       ` this.total = res.data.total`
      } else {
        this.$message.error(res.meta.msg)
      }
    },
Copy the code

tree-table

Install: NPM install vue-table-with-tree-grid-s

Time conversion —-filter

Filter Timestamp online tool Directive directive

< el - table - column prop = "add_time" label = "start time" > < template slot - scope = "scope" > {{scope. Row. Add_time | dataFilter}} </template> </el-table-column>Copy the code

Method one:

Date-handling library moment.js

1. Install: NPM install moment-s

2. Introduce the moment.js module

import moment from 'moment'

filters:{
        dataFilter (val) {
            return moment(val * 1000).format('yyyy-MM-DD hh:mm:ss')
        }
}
Copy the code

Method 2:

filters:{ dataFilter (val) { const timer = new Date(val * 1000) const y = timer.getFullYear() const M = timer.getMonth()  + 1 const d = timer.getDate() const h = timer.getHours() const m = timer.getMinutes() const s = timer.getSeconds() return `${y}-${M}-${d} ${h}:${m}:${s}` } }Copy the code

Qs is a package managed by the NPM repository

NPM install QS
Introduction of QS module

import qs from 'qs'

Principle and Application:

Qs.stringify () serializes the object into a URL, concatenated with &

Can deal with backstage to obtain logistics information

Json.stringify (param) {“uid”:”cs11″,” PWD “:” 000000ALS “,”username”:”cs11″,”password”:”000000als”} uid=cs11&pwd=000000als&username=cs11&password=000000als

conclusion
  • Qs.parse ()—– parses the URL into an object
  • Qs.stringify () serializes the object into a URL, concatenated with &
  • The json.parse () method converts a JSON string to an object.
  • Json.stringify () converts an object or array to a string

Echarts

Echarts.js (domestic) : HighCharts library made by visual data Canvas first appeared (foreign) SVG—— d3.js: link: d3js.org/

Echarts use:

1. Download NPM install echarts-s

Import * as echarts from ‘echarts’

3. Prepare a DOM with size (width and height) for ECharts

<div id="main" style="width: 750px; height:400px;" > </div>Copy the code
Data () {return {var option = {}}}Copy the code
  1. Initialize the Echarts instance based on the prepared DOM
mounted(){
     var myEchart =echarts.init(document.getElementById('main'))
}
Copy the code

5. Prepare data and format data in the Lodash library

const result = lodash.merge(res.data, this.options)

  1. Display data myChart.setOption(result)

Lodash formatting utility class

Install: NPM install lodash -s

Introduction module:

import _ from 'lodash'

Rich text editor

  • Tinymce
  • wangeditor
  • qulleditor

Install the quill – editor:

1.npm install vue-quill-editor –save
2. Import in main.js
import VueQuillEditor  from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
Vue.use(VueQuillEditor)
Copy the code

Project optimization

1. Add a progress bar

1.nprogress

Install: NPM install nprogress-s

2. Introduce the NProgress module

Introduced in API index.js:

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
Copy the code
3. Add the following to the corresponding request interceptor and response interceptor respectively:
NProgress.start()
NProgress.done()
Copy the code

Second, modify the warning

Tree-table-grid insert v-slot: scope=”scope” slot=”order”;

<! -- sort --> <template V-slot :order="scope"> <el-tag size="mini" V-if ="scope.row.cat_level === 0"> level </el-tag> <el-tag Type ="success" size="mini" v-else-if="scope.row.cat_level === 1"> level 2 </el-tag> <el-tag type="warning" size="mini" V-else > level </el-tag> </template>Copy the code

3. Go to console.log during the packaging phase

Install transform-remove-console plugin:

npm install transform-remove-console -D

In the Babel. Config. In js:

plugins:[
   'transform-remove-console'
]
Copy the code

4. Main-dev. js development version &&main-pro.js release version

The vue. Config. Js

module.export = { chainWebpack: When (process.env.node_env === 'production', config => {// entry finds the default package entry, Add add a new package entry config.entry('app').clear().add('.src/main-prod.js')}) // development stage config.when(process.env.NODE_ENV === 'development', config => { config.entry('app').clear().add('.src/main-dev.js') }) } }Copy the code

Load CDN

1. In vue. Config. Js
Config. Set ('externals', {// When import vue from "vue" is not used locally, CDN remote address vue:' vue ', 'VueRouter' :'VueRouter', axios: 'axios', echarts: 'echars', nprogress: 'NProgress', moment: 'moment'})} in vue.config.js // html-webpack-plugin -- assign index.html to config.plugins(' HTML ').tap(args => { args[0].isProd = true return args }Copy the code

2. Add the CDN address to the public index. HTML page

< % if (htmlWebpackPlugin. Options. IsProd) {% > < script SRC = "" > reference package. The version number of json, find the corresponding in CDN compressed file into the < / script > < %} % >Copy the code

JS template engine: art-template

< % if (htmlWebpackPlugin. Options. IsProd) {% > < %} % > can write js in HTML syntax

6. Enable GZIP compression (configure both the server and the front end)

Download compression-webpack-plugin:

. Gzip compression format: The remote end needs to enable gzip compression. The small volume reduces the request for nginx to deploy front-end engineering, nginx needs to enable gzip compression

Browser –> nginx (CSS js HTML) nginx returns the gzip file to the browser in real time, which causes nginx performance consumption problem.

const ComPressionPlugin = require("compression-webpack-plugin") const productionGzipExtensions = /\.(js|css|json|txt|html|ico |svg)(\? . *)? $/i module.export = { configureWebpack: { puligns: [ new ComPressionPlugin({ filename: '[path].gz[query]', algorithm: 'gzip, test: productionGzipExtensions, threshold: 10240, minRatio: 0.8, deleteOriginalAssets: true})]}}Copy the code

Lazy route loading

In the index.js of the router:

const routes = [ { path: '/home', name: 'Home', component: Home, } ] component: Resolve => require(['@/views/login/login'], resolve) or: import Vue from 'Vue' const Vue = () => import(' Vue ')Copy the code
Routing module imports packets:

(1) Install syntax-dynamic-import

Enter: NPM install — save-dev@babel /plugin-syntax-dynamic-import command

(2) Create a babel.config.js file in the root directory

plugins: [
 '@babel/plugin-syntax-dynamic-import'
]
Copy the code

Reference: blog.csdn.net/baidu_41601…

Eight, package deployment

1. On the CLI, enter vue UI to open the interface

2. Test optimization indexes of each part of the project through Beta interface
1. You can select the project to be opened in project Manager.
2. Task –>build –> Run –> Output

After the operation of the above seven steps, the errors and warnings are zero, and the optimization is completed when the resource and module parts are small.

3. Upload the dist file to the domain name.

Method 1: node bin/ WWW

Method 2: NPM start

pm2

Nodejs management tool PM2: Enables the backend to be connected and run even when the terminal is shut down

npm install pm2 -g
pm2 start app.js
pm2 list
Copy the code