What are the new features after upgrading vue-cli 3.0.x to webpack4?
This time I will bring you what are the new features of vue-cli 3.0.x after upgrading to webpack4, what are the precautions after vue-cli 3.0.x is upgraded to webpack4, the following is the actual combat Let’s take a look at the case.
The project is being optimized recently. I took a look at the use of vue-cli3.0.x when I had time. It feels pretty good. Because the previous project used vue-cli 2 Created, forcing us to use eslint makes us uncomfortable. Some "build" and "config" that have nothing to do with the project make people feel uncomfortable. . Since there are many corporate environments, the configuration of the test environment is required. Added ""tt": "node build/tt-build.js"". to 3.0.x How should it be used? It feels much better to look at 3.0.x with these issues in mind.1. Official website information
When learning technology, always check the information on the official website. Because the information there is updated the fastest.vue-cli
vue-cli documentation
2. InstallationEnvironment
Here, I recommend you to use npm install -g @vue/cli. Through yarn global add @vue/cli, you need to make other settings and generate some files.Delete for a few minutes.
npm install -g @vue/cli # or yarn global add @vue/cli # 使用vue命令,创建项目(不同于cli2.0的init,create) vue create my-project
yarn // 安装项目依赖 cd packages/@vue/cli // 目录 yarn link //添加 link `vue` 执行指命 。 vue create my-project // 创建项目 。
3. Multi-environment configuration
Because the company has a development environment, a testing environment, a joint debugging environment, and an online environment. Reduce manual configuration and configure it once. So "package.json" was added in 2.0.x "tt": "node build/tt-build.js"" type configuration cannot configure many files. It is supported in vue-cli 3.0.x ".env" file configuration, I added ".env.development", ".env.production" and ".env.test" configuration here . 1. Basic correspondence and defaultdevelopment is used by vue-cli-service serve production is used by vue-cli-service build test is used by vue-cli-service test
"dev-build": "vue-cli-service build --mode development",
Configuration fileWriting
The configuration file content format is as follows,VUE_APP_*
VUE_APP_MOCK_URL = 'https://xxx.xxx.xxx/restapi/'
console.log(process.env.VUE_APP_MOCK_URL); process.env.NODE_ENV // 特定 BASE_URL // vue.config.js 配置
How to request local json data in vue configuration
pandas dataframe implements row selection and slicing operations
Selenium cookie skips the verification code login implementation step-by-step explanation
The above is the detailed content of What are the new features after upgrading vue-cli 3.0.x to webpack4?. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



Vue-cli is a scaffolding tool officially provided by Vue.js to build Vue projects. By using Vue-cli, you can quickly build the basic skeleton of a Vue project, allowing developers to focus on the implementation of business logic without spending a lot of time. To configure the basic environment of the project. This article will introduce the basic usage of Vue-cli and commonly used plug-in recommendations, aiming to provide a guide to the use of Vue-cli for beginners. 1. Basic usage of Vue-cli Install Vue-cli

Vue is a popular front-end framework favored by many developers for its flexibility and ease of use. In order to better develop Vue applications, the Vue team has developed a powerful tool-Vue-cli, which makes it easier to develop Vue applications. This article will introduce you to the use of Vue-cli in detail. 1. Install Vue-cli Before using Vue-cli, you need to install it first. First, you need to make sure you have Node.js installed. Then, install Vue-c using npm

Vue-cli3.0 is a new scaffolding tool based on Vue.js. It can help us quickly create a Vue project and provides many convenient tools and configurations. Below we will introduce step by step the steps and process of creating a project using Vue-cli3.0. To install Vue-cli3.0, you first need to install Vue-cli3.0 globally. You can install it through npm: npminstall-g@vue/cli

Instructions for using Vue-cli scaffolding tools and project configuration. With the continuous development of front-end technology, front-end frameworks are attracting more and more attention from developers. As a leader in front-end frameworks, Vue.js has been widely used in the development of various web applications. Vue-cli is a command line-based scaffolding officially provided by Vue.js. It can help developers quickly initialize the Vue.js project structure, allowing us to focus more on business development. This article will introduce the installation and installation of Vue-cli

The specific method is as follows: 1. Create the backend server object upstreammixVueServer{serverbaidu.com;#This is your own server domain name} 2. Create the access port and reverse proxy rule server{listen8082;server_namelocalhost;location/{rootE:/mix_vue/dist;# Locate the directory of the project#indexindex.htmlindex.htm;try_files$uri$uri//index.html;#Configure according to the rules of the official website}location~\.php${proxy_p

Technologies used: 1. vue.js, the core of the vue-cli project, whose main features are two-way data binding and component systems; 2. vue-router, the routing framework; 3. vuex, the state manager for vue application project development ; 4. axios, used to initiate http requests such as GET or POST; 5. vux, a mobile UI component library specially designed for vue; 6. emit.js, used to manage the vue event mechanism; 7. webpack, module Load and vue-cli project packager.

With the continuous development of front-end technology, the problems we face have gradually become more complex, which not only requires our code to have a reasonable structure and good modular design, but also requires code maintainability and execution efficiency. In this process, how to ensure the quality and standardization of the code has become a difficult problem. Fortunately, the emergence of code standardization and bug detection tools provides us with effective solutions. Using ESLint for code standardization and bug detection in the Vue.js framework has become a common choice. 1. ESLint

Projects built in history mode need to rely on background technology. The nginx reverse proxy is used here to deploy the project. The specific method is as follows: 1. Create the backend server object upstreammixVueServer{serverbaidu.com;#This is your own server domain name} 2. Create the access port and reverse proxy rule server{listen8082;server_namelocalhost;location/{rootE:/mix_vue/dist;# Locate the project directory #indexindex.htmlindex.htm;try_files$uri$uri//
