Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about how to build the Vue2 mobile development environment. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

Here, we give the construction of the mobile environment based on Vue2. People on the mobile side think more about the response layout. We adapt according to different screen sizes, of course, our highlight is rem, and there is nothing special about the mobile compared to the pc.

I will take you step by step into the world of Vue2, embracing change, and those who are familiar with Vue 1.x can quickly master 2.0 according to the documentation, because about 90% of the syntax is repetitive. 2.0 is more based on the optimization of the framework itself, the overall design idea is unchanged.

Vue-cli

First of all, let's introduce our scaffolding tool, because it can save us most of the configuration time. Here are only simple steps. The premise to ensure that your command runs smoothly is to install the vue-cli version of node and npm. The upgrade process is not discussed here.

Global installation of vue-cli

Npm install vue-cli-g

Use this to install a webpack globally.

Npm install webpack-g

Note that there may be pits here, and the installation of users in the wall fails. It doesn't matter. Let's install Taobao image first.

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 gives the installation scheme for npm by default. If the installation fails, please convert it to cnpm installation.

Run at the location where you need to create the project

Name of vue init webpack-simple project

Or create a project for vue1.0, simply replace the command with

Vue init webpack-simple#1.0

Here we are based on 2.x development, we can directly use * * to create a project. The following is a screenshot of the project, which requires you to add Project name,Project description,Author.

The next step has been given in the figure. We will follow the steps step by step. Here orange does not give you a step-by-step list.

Note: be sure to use npm install to install the official library here, rather than using Taobao image, which will result in some dependency loss.

After the installation is complete, the directory is shown below.

Then after we run our project, the browser automatically pops up and displays the following page

Note here that we are given eight links by default, according to which we can get the learning resources we want. Above are the necessary links (official documents and follow vue developments). Below is the vue ecosystem, which we affectionately call the whole family bucket.

Vue family bucket

Next, we will introduce the installation of the whole family bucket (for details, you can go to the link on the initial page)

One order to take care of the whole family bucket.

Npm install vue-router vue-resource vuex-save

Package.json has been added to our family bucket, and there are corresponding dependent packages in the node_modules directory. Note that the extended method cannot be used here, because we have not introduced it into the project.

The src/main.js is modified as follows

Import Vue from 'vue' import VueResource from' vue-resource' import VueRouter from 'vue-router' import Vuex from' vuex' import App from'. / App.vue' Vue.use (VueResource) Vue.use (VueRouter) Vue.use (Vuex) new Vue ({el:'# app', render: h = > h (App)})

At this point, our project can run the corresponding extension method.

Integrated Sass

As a mobile developer, how can we lack the css precompilation language? Several dependencies are required for sass installation.

We might as well write the version dead in package.json and install it through npm install.

Add the following dependencies in "devDependencies": {}

"node-sass": "^ 3.8.0", "sass": "^ 0.5.0", "sass-loader": "^ 4.0.0"

OK, after we npm install, we can officially use sass.

Directory structure recommendation

The dependent installation is almost over here, and you can customize the installation for others you need.

Here are some suggestions on my catalogue for your reference.

Here the img directory places pictures, the script directory places common tool functions, and the style directory places our sass files.

When you look at the App.vue file, it is not difficult to find that the style file is given to the module by default, so that the style follows the module all the time.

Orange advises you not to do this, because it is very unfavorable to the modularization of the style, and pay attention to the difference between the modularization of the style and the modularization of the template.

We set up the style directory separately and modularize the sass in the directory (introducing the sass module through import)

The corresponding App.vue also becomes very concise, with the following code

@ import "/ style/base.scss"

Rem adaptation

For mobile development, rem adaptation is essential, and we can implement it in many ways. Here is a solution.

Add the following code to index.html

Let html = document.documentElement; window.rem = html.getBoundingClientRect (). Width / 16; html.style.fontSize = window.rem + 'px'

Here, the screen based on 320px is divided into 16 parts, that is, 1rem = 20px. At present, most of the design drafts are based on the width of iphone6 (375px). It is recommended that you divide them into 25 parts here, that is, 1rem = 15px, which is more convenient to calculate.

Briefly talk about the rem principle: according to the fontSize attribute value of html as the benchmark, all other rem values are calculated according to this benchmark.

We use js to dynamically modify the fontSize attribute value of html according to the screen width to achieve the purpose of mobile adaptation.

The above is the editor for you to share how to build the Vue2 mobile development environment, if you happen to have similar doubts, you can refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.