Write in the front — RECENTLY I took over an active page, and decided to use Vue for development, no longer associated with the React of the main station, so I had the opportunity to build the whole project from scratch, step by step, and decide the technology stack by myself. Anyway, it was great

I don’t think there is any need to introduce Vue. There are a lot of them in nuggets, but if you haven’t heard of them, I recommend you to go directly to the official document of Vue for reading.

Project background

Recently, I took on a project — a completely independent active page development. Since it has almost no dependence on the company’s original project (based on React), I decided to use Vue to develop the requirements for this time. Front-end project preliminary as – Vue/Vue – the technical framework of the router/axios/sass/webpack. When you see Vue and Webpack, I believe you can immediately think of Vue-CLI. Yes, we chose Vue-CLI-webpack as scaffolding for this project.

Vue-cli: mandatory at home

We assumed that vue started with 10 difficulty levels, but when we used vue-CLI, we found that the difficulty became 1 difficulty level (as if we had canceled the backswing of casting). After installing vUe-CLI, we could start production directly. The configuration of both Vue and WebPack is not required, and we can use vue-template to speed up development. So let’s start building our scaffolding

$ npm install -g vue-cli

$ vue init webpack kurisu //'webpack'Specifies $that we want the project to be packaged using WebPackcd kurisu
$ npm install
$ npm run dev
Copy the code

The process is as simple as that, if you need to install Node(6.x or later) and NPM(3.0 or later). Now that we have the actual scaffolding, it’s time to start piling things up.

Who am I? Where I am? What do I develop? What do I need?

At the beginning of the project, I believe you have encountered this question, how the project needs to be developed, what tools it needs, or what can be used for it.

This time I need to develop a mobile terminal active page, mobile terminal mobile terminal, naturally, there is no adaptation to the screen. With half a year’s experience in Chetu, I chose REM as the unit of page development, which is actually a reference to taobao’s Flexible. Since you use this, then the CSS precompiler is essential, here I have been using THE SCSS, but recently HEARD that the stylus is also good, a little bit of a problem, finally choose the most efficient development of SCSS.

I’ve dug a lot of holes for myself. Let’s fill them one by one.

  • Move the Html

    There’s not much to say about HTML on mobile, but the most important one is here

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
Copy the code

  • Rem layout

    Rem is what? In simple terms, a unit in CSS, in HTML as a unit of the standard font size

    html {
    font-size: 100px;
}
Copy the code

    In this case, 1REM is equal to 100px. Yes, I understand that, but what does it necessarily have to do with mobile development? We can say yes or no, using REM as a development unit can improve the development efficiency, reduce the difficulty of visual manuscript restoration, and enhance the adaptability of the page on different screens. The following is the configuration of global.scss in the project

    html {
    font-size: calc(100 vw / 7.5);/* With this line, the font size of the HTML is dynamically computed, it changes with the size of our screen (100vw) */
}
Copy the code

    So what is 7.5? Here’s what it looks like –100vw/750px, why 750px, because this is twice the size of the standard iPhone7, which is commonly known as the double image, so 1rem is equal to 100px of the iPhone7 page, so why divide it by 7.5? Personally, I think it is for the convenience of writing.

    @function px2rem($n) {
    @return $n/100*1rem
}
Copy the code

    With this method defined, if we want to create a 100x100px square in the design (double drawing), we can write this:

    .somediv {
    width: px2rem(100);
    height: px2rem(100);
    /*px2rem(100) ==> 375px screen 50px*/
}
Copy the code

    I don’t know if you have noticed, this means that we can completely copy all the parameters in the design draft, and basically ignore the adaptation of screens of different sizes, because the basic unit of REM will change with the change of screen size. But one of the things that might be a problem is the accuracy of the Retina display and you can go and check out the blog posts about that, but it would be a bit of a distraction to talk about it in detail.

  • SCSS configuration

    After all this talk about SCSS, I don’t think I’ve told you how to integrate SCSS into WebPack.

    First load up the dependencies —

    (c) NPM install nod-sass --save-dev (c) NPM install sass-loader --save-dev // If you want to install a style-loader, you need to install a style-loader.Copy the code

    Next, configure our webpack.base.conf.js

    module: {
    rules: [
        ...(config.dev.useEslint ? [createLintingRule()] : []),
        {
            test: /\.vue$/.loader: 'vue-loader'.options: vueLoaderConfig
        },
        {
            test: /\.js$/.loader: 'babel-loader'.include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]}, {test: /\.(png|jpe? g|gif|svg)(\? . *)? $/.loader: 'url-loader'.options: {
                limit: 10000.name: utils.assetsPath('img/[name].[hash:7].[ext]')}}, {test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\? . *)? $/.loader: 'url-loader'.options: {
                limit: 10000.name: utils.assetsPath('media/[name].[hash:7].[ext]')}}, {test: /\.(woff2? |eot|ttf|otf)(\? . *)? $/.loader: 'url-loader'.options: {
                limit: 10000.name: utils.assetsPath('fonts/[name].[hash:7].[ext]')}},// Add the following section to make webPack use the relevant loader to parse files with SCSS suffix
        {
            test: /\.scss$/.loaders: ["style"."css"."sass"]]}}Copy the code

    This will complete the requirement to reference SCSS in a vue project. There are several different ways to reference SCSS in a vue template

    <style lang="scss" scoped>
    @import "./Index.scss";
</style>
Copy the code

    Personally, I prefer a one-to-one reference pattern. I create a new folder for each page and put everything related to it together.

    Global-related styles are put in global. SCSS introduced by app. vue, and utils. SCSS is used to put styles or methods that are public but not public. Another option is to import all the SCSS files into a total SCSS file and then import the total SCSS file in app.vue.

Stage set up

So far, the scaffolding of vUE project has been basically completed, and we can comfortably put meat into the project. In the next article, I will record the problems encountered along the way and the holes filled in the specific pages developed.

The articles

  • React, a homemade music player for mobile
  • The calendar & Time pit in mobile
  • Talk about the React – componentWillReceiveProps use