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
- 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)
- 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