Home Web Front-end JS Tutorial vue-cli 3.0 What beginners need to know

vue-cli 3.0 What beginners need to know

Apr 20, 2018 am 10:58 AM
vue-cli Beginner's guide

This time I will bring you what vue-cli 3.0 novices must know when getting started. What are the precautions that novices must know when getting started with vue-cli 3.0. The following is a practical case, let’s take a look.

This article mainly introduces the 10-minute introduction to getting started with vue-cli 3.0. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look.

Environment installation

A new version of scaffolding, very high quality, remember this name@vue/cli, yes, you can just install it with npm or yarn. Make sure the global environment has it first.

npm install -g @vue/cli
yarn add global @vue/cli
Copy after login

Create project

Here is a comparison with the previous version before 2.X. The new version adds the plug-in and templates have been ported to the command line interface.

#Old versionCreate command2.xvue init 3.xvue create

来一张图把 ,这里已经有几个默认配好的模板了,我们选最后的Manually select features

vue-cli3.0在你创建后会有一个保存当前配置的功能

配置项目插件和功能

这里就很傻瓜了, 你要集成什么 就选就行了。我这里选个我比较常用的。

  1. TypeScript

  2. PWA

  3. Vue-router

  4. Vuex

  5. CSS预处理

  6. eslint prettier

  7. 自动化测试<a href="http://www.php.cn/php/php-tp-unittesting.html" target="_blank">单元测试</a> 、e2e

这里我选LESS

这里我选eslint + prettier

这里选择语法检查的方式 保存就检查 还是fix和commit时候检查,我就默认选第一个了

这里单元测试 插件我选jest

这里是把babel,postcss,eslint这些配置文件放哪

  1. 独立文件放置

  2. package.json

个人喜好 这里我独立放

最后就是选择 是否记录一下? 下次继续使用这套配置 ,这里咱就不存了 这玩呢存多了 我都不知道怎么删 知道的小哥哥小姐姐麻烦 告诉我下哈。

ok最后确定后 等待装好吧

嗖 装好了

启动项目进入目录,启动项目 这里 vue-cli 3.x 默认会打开浏览器 地址也会打在控制台。

  yarn serve 
  // OR
  npm run serve
Copy after login

启动后的界面就不截图了 ,按步骤正常操作下来应该跟之前版本一样。

项目分析

首先看下整体目录 比 2.x之前 是精简了不少

去掉了2.x buildconfig等目录 ,大部分配置 都集成到vue.config.js这里了

vue.config.js里
大概包括了配置 常用的输出路径名、跟目录、预处理、devServer配置、pwa、dll、第三方插件等等
详细配置可以看官方文档 详细config配置

如何随心所欲

1. 服务器配置修改

这里我先改个端口, 修改vue.config.js 然后重新启动工程 , 可以看到已经改成5999端口了

module.exports = {
 lintOnSave: false,
 devServer: {
  port: 5999
 }
}
Copy after login

2. 常用webpack配置修改

webpack的配置在这个属性里修改configureWebpack  

包括plugins也可以自己扩展 ,本身尤大已经把常用的都封装了 ,不满足可以自行扩展。

这里改个webpack devtool输出方式、默认那个我属实不知道怎么跟踪代码

configureWebpack: config => {
  if (process.env.NODE_ENV === 'development') {
    config.devtool = 'source-map'
    // mutate config for production...
  } 
}
Copy after login

其他配置 就不一一介绍了 具体可以看这里webpack

3. 全局变量的设置

在项目根目录 创建二个文件

.env.development
.env.production

里面配置键值对就行了

但要注意 这里必须以VUE_APP开头

这样我们就可以自定义个全局变量在某个模式下

VUE_APP_MOCK_URL = 'http://xxxx.xxx.xx.xx/mockjs/'
Copy after login

比如这样在axios中就可以配置根路径了

const service = axios.create({
  baseURL: process.env.VUE_APP_MOCK_URL
})
Copy after login

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

D3.js实现动态表盘效果

vue.js动态操作同级class

JS插入DOM节点(附代码)

The above is the detailed content of vue-cli 3.0 What beginners need to know. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1653
14
PHP Tutorial
1251
29
C# Tutorial
1224
24
Learn how to play SpongeBob SquarePants and the Krusty Krab from scratch Learn how to play SpongeBob SquarePants and the Krusty Krab from scratch Jan 26, 2024 pm 02:15 PM

"SpongeBob SquarePants in the Krusty Krab" is a cooking simulation business game with fast-paced gameplay and full of surprise dishes. You will play SpongeBob and expand various restaurants and kitchens in the game to bring joy. For novice players, here are some strategy suggestions: First, arrange the kitchen layout rationally to improve work efficiency; second, pay attention to the procurement and storage of ingredients to ensure adequate supply; also pay attention to customer needs and process orders in a timely manner; finally, constantly upgrade equipment and recipes to attract more customers. Through these skills, you will be able to get better in the game SpongeBob SquarePants and the Krusty Krab Beginner's Tutorial 1. There is a small goal at the beginning. Players only need to complete the goal to pass the level; 2. During the production process , everyone must carefully check the customer's needs; 3. Every time you complete a

Beginner's Guide and Strategies for Cow Town Game Beginner's Guide and Strategies for Cow Town Game Jan 23, 2024 pm 09:06 PM

Little Time in Cow Town is a casual farming game that is loved by players. The game sets a leisurely pace and relaxed gameplay, allowing players to create their own interesting stories in the world of simulated towns. Many novice players are interested in this unique business simulation game. Here, I will share with you some introductory gameplay strategies suitable for novices to help them start the game better. Little Time in Cow Town Beginner Game Guide Little Time in Cow Town is an open mobile game that simulates rural life. In this small pixel world, you will experience land reclamation, animal husbandry, building a manor workshop, and conquering the town. Residents and other new farm life, as well as fishing and horse racing, mining adventures, market trade and other diverse gameplay, are waiting for you to experience this new cow town. big

Vue-cli3.0 scaffolding to create Vue project steps and process Vue-cli3.0 scaffolding to create Vue project steps and process Jun 09, 2023 pm 04:08 PM

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

The use of Vue-cli scaffolding and its plug-in recommendations The use of Vue-cli scaffolding and its plug-in recommendations Jun 09, 2023 pm 04:11 PM

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

A detailed guide to using Vue-cli in Vue A detailed guide to using Vue-cli in Vue Jun 26, 2023 am 08:03 AM

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-cli scaffolding tool usage and project configuration instructions Vue-cli scaffolding tool usage and project configuration instructions Jun 09, 2023 pm 04:05 PM

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

Introduction to how to play for beginners in Dream City Introduction to how to play for beginners in Dream City Jan 23, 2024 am 08:00 AM

How should new players of Dream City operate? Dream City is a high-quality simulation management game with beautiful and healing content. It provides a lot of free and open city construction and management. It is created with fun and outstanding content, and can be played in depth with a dream rhythm. Exploration, new players are also curious about how to operate. This issue brings a guide to the Dream City beginners! Introduction to the introductory gameplay of Dream City 1. When the Dream City level tree reaches level 3, the land reclamation function is unlocked. Land reclamation requires a dispatched animal, and at the same time It consumes a certain amount of water elements, earth elements, wood elements and gold coins, but some wastelands only require gold coins. 2. Each time you open up wasteland, you can only choose wasteland connected to the unlocked land. Different wastelands require different amounts of materials. As the number of times you open up wasteland increases, the demand for materials in the later period will also increase.

How to deploy nginx to access projects built by vue-cli How to deploy nginx to access projects built by vue-cli May 15, 2023 pm 10:25 PM

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

See all articles