Vue cli strongest Guide

Li gulare 2020-11-12 23:49:40
vue cli strongest guide

notes : This is the official website connection : , It is suggested that we should not only look but also think more about , The introduction here is the most complete and accurate .

①.vue-cli What is it? ?

vue-cli Also known as vue The scaffold ,( I find that the front end has never lost in naming ) The name is easy to understand . Baidu Encyclopedia's explanation of scaffolding is : Scaffolding is a work platform built to ensure the smooth progress of the construction process . In fact, infrastructure engineering and software engineering have many things in common , Many development ideas and management methods in software engineering are also introduced from infrastructure construction . On the front end vue I think it's very good to introduce the term scaffold into the frame . In addition, from Baidu Encyclopedia's explanation , You can guess roughly vue-cli What is used in the project .vue-cli It's a working platform , The development of this platform can be controlled efficiently , Make project development more up to standard , Even if many people develop at the same time, it can ensure that the code specification requirements are the same . stay vue-cli In this working platform , Multi person collaborative development is more efficient , The product manager doesn't have to worry about the incompatibility between the code I wrote and my partner . Because of these excellent frameworks, the front end also has the opportunity to experience engineering programming . In fact, I feel that the best part is project migration and backup . There is now a vue-cli Only one configuration file is required (package.json) and vue-cli You can build the same scaffold with a few commands in ( Work platform ) come out .

The premise is that you have to install vue-cli.

②.vue-cli install

Run the command :cnpm install -g vue-cli

vue-cli Before installing, make sure that you have installed it in your computer nodejs, as for nodejs And how to install it can refer to my last article : Walk into vue2.0 Grand View Garden .

If it's already installed nodejs, Enter your working directory ‘E:\WorkSpace\vue2.0-tutorial’, Open command window

Run the command :cnpm install –g vue-cli

cnpm Installation command :npm install -g cnpm --registry=

notes :cnpm It's the installation image of Taobao , It's going to be a lot faster in terms of speed

-g Global installation

vue-cli After installation , You can use vue Command to build a project platform .

③.vue-cli Build the project

Run the command :vue init webpack your-project

There's a strange thing mixed into this order :webpack,webpack What is it? ? Why is it vue It's going to appear in the order of webpack This instruction ?

Take a look at the official website :

It can be seen from the picture that , Script on the left 、 style 、 picture 、 surface 、 Resources and other documents go through webpack After that, it became a simple three categories of four files : style 、 Script 、 picture .

so,webpack The function of the project is to package the static resource files in the project , Sum up by category . after webpack After packaging, the file structure is clearer , Most importantly, it can be run directly in the browser . because webpack Has been integrated into vue-cli It's in , No need to install separately , however webpack4.X Later versions need to be installed webpack rely on ,

Run the command :cnpm install webpack webpack-cli -g

Enter the command :vue init -h

As you can see, there are two ways to build a project , The first one is the kind of , This built project is built using official templates , The second kind vue init username/repo my-porject It's using github On the template to build . Here we choose the first one .

The details of configuration information during project construction are as follows :

Project name : Project name , You can customize , Direct carriage return defaults to the item name specified in the instruction

Project description : Project description , You can also click enter directly , Use the default name

Author: author , You can specify that , You can also go straight back

Runtime + Compiler: recommended for most users

Run and compile , Now that I have said the recommendation , Just choose it

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere

Run time only , If you already have a recommendation, choose the first one

Install vue-router? (Y/n)

Whether to install vue-router, This is the official route , Use... In most cases , Enter here “y” Back to the car .

Use ESLint to lint your code? (Y/n)

Whether to use ESLint Management code ,ESLint It's a code style management tool , The standard style and style used to unify , Here I have chosen “n” Not to install .

Setup unit tests with Karma + Mocha? (Y/n)

Unit test installed or not . I chose “n” Not to install .

Setup e2e tests with Nightwatch(Y/n)?

Whether to install e2e test . I chose “n” Not to install .


After the command is run , Enter the project directory and you will see many more files , The next step is to develop the project on this basis . It's much easier than creating folders and creating new files directly .

④.vue-cli Configuration explanation

After the completion of project construction, there is no need for additional configuration , Entering commands on the command line :cnpm run dev Start the project , Then you can open it in the browser .

But I also want to introduce some basic configuration here , In this way, we can have a preliminary understanding of the built project, such as configurable and operational .

use IDE Import the project you just built , What I'm using here is visual studio code, The function can meet the needs of daily development , The most important thing is free , Don't worry about the software expiration date. The whole network is searching for the registration code , This kind of pain used to crack the version will understand .

The project directory structure is shown in the figure below :

I've highlighted a few key points in the screenshot with red boxes , Look at what it's all about ?

config: This is the configuration center of the whole project , It's all global configuration .

dev.env.js: Variables used by the development environment

index.js: Configuration information of project operation , Like ports 、 File generation path 、 The directory where the resources are stored

prod.env.js: Variables used in the production environment


// index.js file

'use strict' // Enable strict mode
// Template version: 1.3.1
// see for documentation.
const path = require('path')
module.exports = {
dev: {
// Resource path
assetsSubDirectory: 'static', // Static resource file subdirectory
assetsPublicPath: '/', // Public static resource file
proxyTable: {}, // List of agents , When making cross domain requests
// Development environment configuration item
host: 'localhost', // The host address can be set to :localhost/*.*.*.*( This machine IP)
port: 8080, // You can customize , If the port is occupied, a new port will be enabled
autoOpenBrowser: false, // Whether to allow automatic browser opening
errorOverlay: true,
notifyOnErrors: true,
poll: false, //
* Source Maps
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
cacheBusting: true,
cssSourceMap: true
build: {
// Home page address of production environment
index: path.resolve(__dirname, '../dist/index.html'),
// Production environment path
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
* Source Maps
productionSourceMap: true, // Whether to generate map file
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false, // Whether to turn on file compression
productionGzipExtensions: ['js', 'css'], // Compressed file filtering
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report

⑤. Project compilation and packaging

Project installation completed , And it works , How to upload the project to the server next ? Can access our project files on the server , Is it to upload our entire project ? So I added a file , It's a bit of a crash to put the whole project on the server . If so ,vue There's no reason for a framework to exist .

How to do that ?

Next, I'll introduce another function , Project package , This is the installation webpack Why .

Run the command :cnpm run build

After running, a new folder will be generated :dist , The files in this are the static files that we need to upload to the service .

open dist Catalog , See if the file and directory structure inside is much cleaner , Here's a document that goes through webpack It is generated after packing , And above webpack Is it corresponding to each other .

⑥.vue-cli Use summary

The following is a summary of the scaffold functions used :

ask : In the use of vue-cli We used a couple of commands when ?

answer : Three .

1.cnpm install -g vue-cli (vue-cli install )

2.vue init webpack your-project ( The project build )

3.cnpm run build ( Project compilation and packaging )

本文为[Li gulare]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple