Vue2-based mobile end development environment construction detailed _javascript skill

Objective

Vue2.0 released, then still use vue1.x you, is not also some move? The following article gives you a detailed introduction to the detailed steps of building a mobile-side development environment based on Vue2, so let's take a look at it.

First, VUE-CLI

The first is to introduce our scaffolding tools, because it allows us to save most of the configuration time, here is only a simple step to ensure that your command runs smoothly if you install the latest version of node and NPM, there is no repeat the upgrade process

Global Install VUE-CLI

NPM Install Vue-cli-g

This also installs a webpack globally

NPM Install Webpack-g

Note that there may be holes in the wall, the user installation failed, it does not matter, we first install Taobao mirror

NPM install-g cnpm--registry=https://registry.npm.taobao.org

Then install Webpack with the following command

CNPM Install Webpack-g

Note: the following orange defaults to the installation of NPM, installation failure, please switch to CNPM installation

Run at the location where you want to create the project

Vue Init webpack-simple Engineering name < project name cannot be used in Chinese >

or create a vue1.0 project, simply replace the command

Vue Init webpack-simple#1.0

Here we are based on 2.x development, directly using the first method to create a project, the following figure is the creation of the project when the screenshot, you need to add, Project name Project description Author .

The steps that should be taken in the next step are given in the diagram, and we follow the steps step-by-step, and orange does not give us a step-by-step listing.

Note: It is important to use npm install the installation of the official library, instead of using Taobao image, will cause partial loss of dependencies.
After the installation is complete, the table of contents is shown below.

Then we run our project after the browser will automatically pop up and show the following page

Notice here, the default to us eight links, can be based on these links to get the learning resources we want, above is the necessary links (official documentation and attention to Vue Dynamic), the following is the Vue ecosystem, we kindly call them for the whole family barrel.

Second, Vue family barrel

We next introduce the whole family bucket installation (use details you can go to the initial page of the link to view)

A command to fix the whole family barrel

NPM Install Vue-router vue-resource Vuex--save

package.jsonHas joined our family bucket, the Node_modules directory also has a corresponding dependency package, note that this is not now the extension of the method, because we did not introduce the project.

Src/main.js modified as follows

Import Vue from ' Vue '
import vueresource from ' Vue-resource '
import vuerouter from ' vue-router '
import Vuex F Rom ' vuex '

import App from '/app.vue '

vue.use (vueresource) vue.use (vuerouter) vue.use (Vuex
)

New Vue ({
 el: ' #app ',
 render:h => H (APP)
})

Then our project will be able to run the corresponding extension method.

Third, integrated Sass

As a mobile end of development how can the lack of CSS precompiled language. Sass installation requires several dependencies.

We simply package.json write the version dead and then install the npm install

"devDependencies": {} Add the following dependencies in

"Node-sass": "^3.8.0", "
sass": "^0.5.0",
"Sass-loader": "^4.0.0",

Okay, we npm install 'll be able to officially use sass later.

IV. Directory Structure recommendations

The dependent installation is almost over here, all the other people need to be able to customize the installation

Here are my directory recommendations for your reference,

Here's the IMG directory to place the pictures, the script directory to place the common tool functions, the style directory to place our sass files,

When you look at the App.vue file, it's not hard to find, by default, the style file is given to the module, so the style follows the module

Orange suggested that you do not do this, because it is very detrimental to the style of modularity, pay attention to distinguish between the modular version of the difference,

We set up the style directory individually and modularize the sass in the directory (import the Sass module through imports)

The corresponding App.vue also becomes very concise, the code is as follows

<style lang= "Sass" >
 @import "/style/base.scss";
</style>

V. REM adaptation

For the development of the mobile end, REM adaptation is essential, we can achieve in a variety of ways, the following gives a scenario

Add the following code to the index.html

<script> let
 html = document.documentelement;

 Window.rem = Html.getboundingclientrect (). width/16;
 Html.style.fontSize = Window.rem + ' px ';
</script>

Here based on the width of 320px screen divided into 16, that is, 1rem = 20px, most of the current design is based on the Iphone6 (375px) walk, suggesting that everyone here into 25, that is, 1rem = 15px, more convenient to calculate.

The rem principle is simple : Based on the FontSize attribute value of HTML, all other REM values are computed according to this datum.

We dynamically modify the FontSize attribute value of HTML according to the screen width with JS to achieve the goal of mobile end adaptation.

Summarize

The above is the entire content of this article, as the mobile end of the configuration of the basic article, in-depth understanding of the framework to continue to build the site, I hope this is a good start, with this shelf and then fill the code on the convenience of many, no longer to consider the development of environmental problems. I hope the content of this article will be helpful to friends who need it.