Tag Archives: & View

Solution of “do not use ‘new’ for side effects” for eslint verification of Vue project

When I was writing Vue project, I wrote the following code in JS to report an error

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  component: {
    App
  },
  template: '<App/>'
})

Solution:

1. Define a variable XXX to accept the created Vue, and then add XXX to use

import Vue from 'vue'
import App from './App.vue'

let myOwn = new Vue({
  el: '#app',
  component: {
    App
  },
  template: '<App/>'
})
Vue.use ({ xxx })

2. Add a comment line above the new Vue so that eslint does not check for ‘no new’

import Vue from 'vue'
import App from './App.vue'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  component: {
    App
  },
  template: '<App/>'
})

 

Solution of installing Vue cli scaffold error-4048

Error report screenshot:

take a look at nodejs version and NPM version:

solution:
there is no permission, you need to use the administrator’s permission
right click the admin permission to run C: Windows/system32\ cmd.exe
If my article is helpful to you, welcome to like, leave a message and pay attention to it. Thank Sanlian!!!
The problem has not been solved!!! 😘😘😘

CSDN: I heard that you are good at playing
GitHub: zhongzhimao
Coupons: coupons

JS Mobile Page to determine whether it is iPhone X, and then set the corresponding height of the element?

In developing H5 projects, it is sometimes necessary to judge the iPhone model and distinguish whether it is iPhone X or not. The implementation is as follows:

methods: {
 isIPhoneX() {
   let u = navigator.userAgent;
   let isIOS = !!u.match(/\(i[^;]+;( U;)?CPU.+Mac OS X/); 
   if (isIOS) {
     if (screen.height == 812 && screen.width == 375) {
       //is iphoneX
     } else {
       //not iphoneX
     }
   }
 }
}

Then set the element height dynamically according to ref, as follows:

methods: {
 isIPhoneX() {
    let u = navigator.userAgent;
    let isIOS = !!u.match(/\(i[^;]+;( U;)?CPU.+Mac OS X/); 
    if (isIOS) {
      if (screen.height == 812 && screen.width == 375) {
        //is iphoneX
        this.$refs.punchcontent.style.height = "calc(100vh - 114px)"
      } else {
        //not iphoneX
        this.$refs.punchcontent.style.height = "calc(100vh - 80px)"
      }
    }else{
      //android
      this.$refs.punchcontent.style.height = "calc(100vh - 80px)"
    }
  }
}

Note: when the
isIPhoneX() method is called, it needs to be invoked in the mounted method, otherwise the setting height is invalid (the first step is to get the DOM node).

Solution to build error in Vue project (error in static/JS)/vendor.xxxxx.js from UglifyJs）

The project that has been running very well suddenly reported an error in build. The error message is as follows:

ERROR in static/js/vendor.f1c68aa2d5e85847d30e.js from UglifyJs
Unexpected token name «i», expected punc «;» [./node_modules/element-ui/src/utils/merge.js:2,0][static/js/vendor.f1c68aa2d5e85847d30e.js:17064,11]
Build failed with errors.

In uglifyjs’ GitHub issues # 78, we found such a solution: because uglifyjs only supports Es5, and element UI may introduce a part of the writing of ES6, so webpack packaging fails. The final solution given in issue is to replace uglify JS with uglify es of beta version (beta version introduces support for es2015 +). You need to execute the command NPMI - D in the front-end working directory uglifyjs-webpack-plugin@beta 。

However, after trying, we found that the problem of build error is still unsolved. After searching for the problem, we decided to use bable to parse the element UI. To complete this operation, we only need to modify the build error in the front-end folder/ webpack.base.conf The. JS file can be modified as follows:
before modification

module: {
rules: [
...
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},

After modification

 

module: {
rules: [
...
{
test: /\.js$/,
loader: 'babel-loader',//Note that elementUI's source code needs to be parsed using ES6
include: [resolve('src'), resolve('test'),resolve('/node_modules/element-ui/src'),resolve('/node_modules/element-ui/packages')]
},
...

It is equivalent to adding element UI to the package that needs to be parsed by Babel.

After that, execute NPM run build again, and the build is successful.

Error in created hook: “referenceerror:” promise “undefined” Vue cli project Google is right, ie reported an error, “promise” undefined“

resolvent:

1. First, download and install “Babel Polyfill” dependency: NPM install — save Babel Polyfill

2. Project main.js Import ‘Babel Polyfill’

Error Description: both chrome and FF are good at keeping “ie” data out

Error analysis: the IE kernel reports an error. First, locate the browser compatibility problem, and then read the error: error in created hook: “reference error:” promise “is not defined”. That is to say, promise callback is not supported. Promise is a feature of ES6. That is to say, the IE kernel version is not friendly to ES6 compatibility, and it needs to be degraded to be resolved. As for “Babel Polyfill” You can see the explanation on the official website

https://babeljs.io/docs/en/6.26.3/babel-polyfill

Unexpected syntax error: unexpected token<

The Vue project encountered an error when running, as shown in the following figure:

after clicking on it, the following prompt appears:

it may be that there is an error in the reference of the resource path, such as vue.config.js In the configuration, the public path is “.”/”, while the browser is http://192.168.1.12 : 8080/test/#/to access the project in this way, there is an additional secondary directory /Test /, resulting in the resource cannot be found.

method 1: put vue.config.js In the configuration, publicpath: ‘/’

method 2: remove the secondary directory http://192.168.1.12 :8080/#/

Syntax error: unexpected token in uni app project compilation

Syntax error: unexpected token in uni app project compilation

Contents of articles

Syntax error: unexpected token error content error reason solution for uni app project compilation

Error content

Originally, it could run well. When it was pulled down and then run to wechat applet, it would report an error, but the web side could run normally~

Module build failed (from ./node_ modules/mini-css-extract-plugin/dist/ loader.js ):

The details are as follows:

Cause of error

None of the solutions found in the search work.

After a careful examination of the code, it is found that the & lt; script & gt; tag appears twice in a newly modified Vue file. The new one is used to describe the style,

Solution

The problem is solved by merging the content in the new & lt; script & gt; into the & lt; style & gt; tag

Note that there can only be three top-level tags in uni app!!

The root of the problem is that the team didn't communicate well, so there was a problem.. But uni app really has a lot of holes!!!!

ElementUI implements front-end paging

To write pagination according to his documents, the most important thing is how to deal with the data displayed in El table

<el-table :data="AllCommodityList.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%">

The most important thing is to deal with the red mark above

Allcommoditylist is the background data, CurrentPage is the current page, the initial value is 0, PageSize is the current data to be displayed, the initial value is 10

The slice() method returns the selected data from an existing array

//1.Paging component
<el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30]"
    :page-size="pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total=parseInt(total)>
  </el-pagination>

//2.control methods
    handleSizeChange(val) {
        this.pagesize = val;
    },
    handleCurrentChange(val) {
        this.currentPage = val;
    },

Research on invalid modification of elementui component style

Background: the default font of El tabs is 14px. If you want to change it to 12px, adding styles in style will not work.

Solution: put style in app.vue Inside, the style takes effect

.panel-content .el-tabs__item.is-top{
  font-size 12px
}

Principle analysis: in Vue component, we often need to add scoped to style to make the current style only act on the node of the current component. After adding scoped, the work behind Vue is actually to add a unique attribute identifier like “data-v-1233” to the node of the current component. Of course, it will also add [data-v-1233] to all styles of the current style. In this way, the current style can only act on the node of the current component.

But we need to note that if we add a child component, similarly, if the child component is also identified with scoped, then the node in the child component cannot be set in the parent component.

If the parent component has scoped and the child component is not set, the style of the node of the child component cannot be set in the parent component. Because the parent component uses scoped, the style set in the parent component is unique and will not affect other component styles.

When I used the Vue quill editor rich text editor, I came across this pit. I just want to set the height of the content area. In this case, it must be in the App.vue Set in, we App.vue Equivalent to the root container, scoped is not set, so it can be set.

Adding scoped in style is equivalent to adding a unique logo on the page.

Vue error: no postcss config found solution

Code from git clone:

npm install

After the dependency is installed, the service is started and an error: no postcss config found appears

npm run dev

terms of settlement:

Create in the project root directory postcss.config.js The configuration content is as follows: you can fix the error problem.

module.exports = {  
  plugins: {  
    'autoprefixer': {browsers: 'last 5 version'}  
  }  
}