DingChangShi

Law-abiding sorrow, strong song every night, at the expense of others riding horses and mules, justice and hunger. Bridge repair road blind, murder arson son many, I went to the west to ask me Buddha, Buddha said: I also have no rut!Copy the code

An overview of the

There has been a major update to Vue Cli, the official scaffolding tool for Vue. Compared to the 2.x version, the new 3.x version has a new big difference in the construction of projects, related packages, plug-ins installation. This article is based on this, choose the @vue/ CLI 3.x version of the scaffolding tool, to build a VUE project from 0 to 1, including the initialization of the project, as well as vUE family bucket (VueRouter/Vuex/Axios/CSS preprocessor) related configuration.

First, know the new version

Vue/CLI 3.x version, pay more attention to the scaffolding tool itself ease of use and scalability, support out of the box, while providing a rich plug-in system.

Good place Why so good?
feature-rich Out-of-the-box support for Babel, TypeScript, ESLint, PostCSS, PWA, unit testing, and end-to-end testing.
extensible Its plug-in system allows the community to build and share reusable solutions based on common requirements.
Without having to Eject The Vue CLI is completely configurable without eject. This way your project can be kept up to date for a long time
Graphical interface on the CLI Create, develop, and manage your projects through an accompanying graphical interface
Prototyping now Practice new ideas instantly with a single Vue file.
For the future Easily produce native ES2015 code for modern browsers, or build your Vue Components as native Web Components.

The above excellent description, from the official, manual smile.gif official website portal

Second, preparation

1. The Node/NPM installation

In order to use NPM, we must install Node first, which is nothing to say. You can download and install the corresponding system version on the portal of node. js official website.

Check whether the installation is successful

// Check node version
node -v

// Check the NPM version
npm -v
Copy the code

2. Install scaffolding @vue/cli

Note: the 3.x version package has been renamed @vue/cli

npm install -g @vue/cli
Copy the code

2. X version installation, NPM install -g vue-cli

Check whether the installation is successful:

// Check the @vue/cli version
vue -V
Copy the code

Mine is 3.11.0

Iii. Project construction

1. Initialize the project structure

vue create appName
Copy the code

Quickly and easily initialize the project structure, selecting the configuration you want to load by default. There are two modes: default, which adds Babel and ESLint configurations by default, and Manually select features, Configure Babel, VueRouter, Vuex, TypeScript, CSS pre-processors, Unit Testing, etc

To show you this, I’m going to go with default

2. Create project files and install dependencies

If configurations such as Babel, ESLint, and postCSS are not isolated during project creation, the corresponding files do not exist and the relevant configurations are stored in package.json

3. Run the project

To run the Vue project, run NPM run serve in the root directory of the project.

At this point, through a few simple operations, Vue project initialization is completed, you guys this is not very simple.

Project extension

1. Configure the VueRouter route

Note the use of vue Add, which adds the Router as a plug-in to the project

vue add router
Copy the code

Yeah, that’s it, that’s the router module configured

2. Vuex global status Manager

Same routine. Let’s go

vue add vuex
Copy the code

Yeah, that’s it. We made it

3. Axios data request

One more time. Let’s go.

vue add axios
Copy the code

Note the presence of the installed package name vuE-cli-plugin-axios in the form of a plug-in

Matters needing attention:

Vue Add is designed to install and invoke the Vue CLI plug-in. For normal NPM packages, this does not mean there is a substitute. For these generic NPM packages, you still need to use the package manager (depending on the NPM package of your choice).

4. CSS preprocessor

CSS preprocessors are used in many current projects, so how do you introduce them in @vue/ CLI 3.x? Because there is no related VUE plug-in, you need to download and install the common NPM package here. The SASS preprocessor is used as an example.

npm install sass-loader sass -D
Copy the code

Yes, install one and it supports sASS preprocessing. The built-in WebPack already does the job for you

Use sass in the.vue component

<style lang="scss">
</style>
Copy the code

Iv. Project configuration file vue.config.js

In the root directory of the project, configure vue.config.js

module.exports = {
  / / configuration items
}
Copy the code

1. Pass options to the preprocessor Loader

For example, pass in shared global variables to all SCSS files.

Assumes the SRC/assets/CSS/variables. The SCSS document

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: '@import "~@/assets/css/variables.scss"'}}}}Copy the code

Note that the official case here is incorrect and affected by the new version of sass-Loader. What needs to change is that the data field is changed to the prependData field

2. Set the externals

During development, in order to better cache files (CDN) and reduce the size of packaged files, some packages do not want to be packaged by Webpack, but they still want to be conveniently used in the project, so you can choose the externals configuration. This section uses jQuery as an example.

Public/index. The HTML into the bag

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
Copy the code

vue.config.js

module.exports = {
  // configureWebpack configureWebpack
  configureWebpack: {
    externals: {
      jQuery: 'jQuery'}}}Copy the code

SRC/components/HelloWorld. Vue using jQuery

import $ from 'jQuery'
Copy the code

Help yourself to the

3. The proxy agent

Daily development, must set up forwarding agent

module.exports = {
  devServer: {
    proxy: {
      '/': {
        target: 'http://xxoo.com'.changeOrigin: true}}}}Copy the code

With the forwarding proxy mastered, Mommy no longer worries about me and the debugging interface on the back end…

5. Auxiliary tools

1. VueDevtools

Install browser extension VueDevtools, assist Vue development, portal

Afterword.

The above is brother Hu to share the content today, like partners remember to collect, forward, click the lower right corner button to see the **, recommended to more partners, welcome a lot of message exchange…

Brother Hu has words, a technology, feelings of brother Hu! Jingdong open platform chief front-end siege lion. Talk with you about the big front end, share front-end system architecture, framework implementation principles, the latest and most efficient technology practice!

Long press scan code attention, more handsome more beautiful yo! Pay attention to Brother Hu said the public number, and Brother Hu continue to in-depth exchanges!