编程知识 cdmana.com

I've worked as a front-end for three years and summed up these necessary skills for wandering in the Jianghu. I hope they can be useful to you

1.uni-app Create project Not only in hbuilder Visualizing new projects in , Actually in vue-cli There's also presupposition in scaffolding uni-app Templates , The specific command is as follows :

vue create -p dcloudio/uni-preset-vue my-project
 Copy code 

Wait for it to download some related plug-ins , Then it will let you choose the project template you want

After downloading the template, you can use it , I encapsulate two frameworks about this template , contain js and ts Two , Open the box , direct clone that will do , welcome start Portal

2.@vue/cli stay windows Under the system initialization project, the selection of user-defined configuration items will not work , You can use this command to wake up :

winpty vue.cmd create your_project
 Copy code 

If you still want to use

vue create your_project

This command starts , Can be in ~/.bashrc Add the following configuration to solve

alias vue='winpty vue.cmd'
 Copy code 

3. installed vscode When you find that you press tab The key does not complete the tag , So you put on

Auto Close Tag,

After loading, it still can't be used , Because vscode This function is off by default , To open it, do the following

Click on the top left corner 【 file 】-->【 Preferences 】-->【 Set up 】, Search for tab, Find... In the search results

editor.tabCompletion,

choice on

4. stylus It's a new one css Precompiled framework , although HBuilder The plug-in library in the software has stylus plug-in unit , But after installation write stylus Grammar can also report errors , intend stylus-loader Did not find , You need to initialize it . Actually stylus How to install and sass equally , Just install the following two plug-ins from the command line

npm install stylus stylus-loader --save-dev
 Copy code 

5. We usually write documents and like to use markdown, It's hard to avoid inserting some pictures , Like the flow chart , Class diagram and so on , But for example, Youdao cloud notes can only use online resources , If you want to upload local pictures, you need to open members , This is understandable , After all, we have to use other people's objects to store . But there is a way , That's when we register a csdn Blog , We can put a special draft box blog , It's used to upload pictures , Stick our local pictures behind the blog , Right click picture , Click on image properties , hold url Copied to the markdown That's fine

6. vue-cli3.x Download the template , If you want to use cnd Reduce package volume , First, in the public/index.html Introduce in the file cdn link , And then again vue.config.js Add the following configuration

configureWebpack: {
    externals: {
      'element-ui': 'ELEMENT'
    }
  }
 Copy code 

7.windows Taobao image is installed in the system cnpm after , stay vscode There are the following errors in

Because powerShell The execution policy of has a security function , It can control PowerShell Conditions for loading configuration files and running scripts . This feature helps prevent the execution of malicious scripts .

So we need to change his security policy , The order is Set-ExecutionPolicy, First, in the win10 Search in the system search box of powershell, Right click administrator to open

Enter the command --> choice A

 set-ExecutionPolicy RemoteSigned
 Copy code 

Use this command to see the status

get-ExecutionPolicy
 Copy code 

If it is RemoteSigned Prove success , No need to restart

8.node Environment use import

install babel transcoding

npm i babel-cli babel-preset-env --D
 Copy code 

Create a new name in the root directory of the project .babelrc file , And write the following

{
    "presets": [
      ["env", {
        "targets": {
          "node": "current"
        }
      }]
    ]
  }
 Copy code 

And then you can use import Import module , For example, in the entry file app.js in

import Koa from 'koa';
const app = new Koa();
 Copy code 

The command to start the service is not node app.js 了 , Switch to babel-node + Entry file

We can configure it in package.json in , stay script Object :

"start": "babel-node src/app.js"  //src/app.js Is the path to the entry file , According to the project division, it needs to be replaced with the corresponding path 
 Copy code 

npm start Start command

If you want to update the service in real time , Not every time you update the code, every time you start the service , We can use nodemon plug-in unit

npm i nodemon -S
 Copy code 

The start command is changed to the following

"start": "nodemon src/app.js --exec babel-node"
 Copy code 

npm start start-up , The following is proof of success

9.vue-cli3 Compile multiple spaces

Default vue-cli3 If there are multiple spaces in the label of the packaged item , such as    , It will only render a , Should be webpack It's dealt with , The way to deal with it is in vue.config.js Add the following configuration

 Copy code

chainWebpack: ( config ) => {
    //  Multiple space rendering configuration 
    config.module
      .rule('vue')
        .use('vue-loader')
          .tap(args => {
            args.compilerOptions.whitespace = 'preserve'
          })    
  }
 Copy code 

REPACK ,ok

10.gitlab Pull code error

fatal: refusing to merge unrelated histories

git pull origin master --allow-unrelated-histories

  Specific reason reference

11.vue-cli3 perhaps nuxt.js pack ts project Compressing code in a production environment results in class names class abnormal , Causes component or class compilation to fail

We just need to change it webpack The configuration can be , The two methods are similar , As follows :

vue-cli3 The project needs to carry vue.config.js To add the following :

 configureWebpack: config => {
   config.optimization.minimizer[0].options.terserOptions.keep_fnames = true;
 }
 Copy code 

nuxt.js The project needs to be in nuxt.config.js Of build Add the following under the field , because nuxt There will be a server-side environment when packaging , So judge here

 build: {
    extend(config, { isDev, isClient }){
      if(isClient){
        config.optimization.minimizer[0].options.terserOptions.keep_fnames = true;
      }
    }
  }
 Copy code 

12. vue-property-decorator This plug-in is using ProvideReactive This modifier may report Cannot redefine property Error of

This is in this package from 8.3.0 This problem occurred after the release , Some people on the Internet say that it is necessary to carry out version regression , But it didn't solve the problem , But upgrade to 9.1.2 That solved the problem , The specific operation is as follows :

npm i vue-property-decorator@9.1.2
 Copy code 

13.js The type of the detection array is object type , Because arrays are also key value pairs , His key It's his index , So when you use typeof array The result is object 了 , So to distinguish between arrays and objects , I encapsulate a way :

const judgeValueTypeFun = ( value ) => {
    let type = '';
    switch (true) {
        case typeof value === 'string':
            type = 'string' 
            break;
        case typeof value === 'number':
            type = 'number'
            break;
        case typeof value === 'boolean':
            type = 'boolean'
            break;
        case value.constructor === Object:
            type = 'object'
            break;
        case value.constructor === Array:
            type = 'array'
            break;
    }
    return type
}
 Copy code 

版权声明
本文为[Small farmers in Phoenix]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224152607741C.html

Scroll to Top