What are some tips in vue.js projects?

This article mainly introduces you to practical tips in the vue.js project. The article introduces it in detail through sample code. It has certain reference learning value for everyone's study or work. Friends who need it can follow it below. Come and learn with me.

Preface

Vue.js is a progressive framework for building user interfaces. Unlike other heavyweight frameworks, Vue adopts a bottom-up incremental development design. Vue's core library only focuses on the view layer, and is very easy to learn and integrate with other libraries or existing projects. Vue, on the other hand, is fully capable of powering complex single-page applications developed with single-file components and libraries supported by the Vue ecosystem.

# Introducing Bootstrap into the Vue project

Sometimes Bootstrap is introduced into the vue project according to needs, and Bootstrap depends on jQuery , when using npm to install, a series of errors may occur

1. Install jQuery

npm install jquery

2. Install Bootstrap

npm install bootstrap@3

The above two steps can also be done first Specify the version number in the package.json configuration file, and then run npm install

After the installation is completed, the project cannot run. Although both have been installed successfully, an error will still be reported." Bootstrap's JavaScript requires jQuery npm", in order to solve this problem, you can introduce it in the main.js entry file like this:

import $ from 'jquery'
window.jQuery = $
require('bootstrap')

Next, in order to be able to use Bootstrap styles, you can introduce bootstrap.css in the entry file. This is the same method as introducing Element UI

import 'bootstrap/dist/css/bootstrap.min.css'

# Turn off eslint code inspection

Many people say that the way to turn off eslint inspection is to comment out build This part of the eslint configuration in the /webpack.base.conf.js file. I don’t know if it is because of the Vue-cli version update, but in actual operation, this does not work.

The correct approach is to change the useEslint attribute of the dev object in the config/index.js file to false. The official comments also make it very clear

# Close some eslint rules

In fact, eslint code inspection is very good, not only standardizing individual js writing, but also in the team It plays a very important role in multi-person collaborative development. But sometimes, these rules are a bit too rigid. For example, declaring an unused variable will result in an error "no-unused-vars". If you want to turn off this rule, you can open the eslintrc.js file and change the corresponding rule to 0. You can close

# Modify the port number

Most projects monitor port 80 by default, so In order to run multiple projects at the same time, you can modify the port number in config/index.js

# Set the file reference path alias

Sometimes there are too many project files, and references like "../../../static/data/xx.json" may often appear, which is troublesome to write and often error-prone (of course It doesn’t matter if the code compiler can prompt), in order to simplify the path, we can configure the alias in build/webpack.base.conf.js

Here is by calling resolve Methods to achieve the purpose of simplifying the path, for example, you can directly use @ to replace src, or you can directly write "api/xx.js" instead of looking for

# UTC time

When using the VueHighcharts component, UTC time is used by default, so the time is always displayed with a gap. For example, the time at this moment is 18:11, 23, 2017. 07 minutes, but the time displayed by UTC time is 10:07 in the picture below

After reading the document, I know that I need to change the useUTC option to false, but I just don’t know how to do it. Where to start. In fact, when introducing components in main.js, we can make relevant configuration modifications

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future. .

Related articles:

How to achieve elastic effects in JavaScript

How to implement ajax request using axios (detailed tutorial)

How to implement $refs and $emit parent-child component interaction using vue.js

What are the differences between extend and component in Vue?

The above is the detailed content of What are some tips in vue.js projects?. For more information, please follow other related articles on the PHP Chinese website!