This blog will talk about how to build vUE 2.0 environment with Webpack, and how to use SCSS and PUG (JADE) in the built environment. Without further ado,we will get to the topic directly.

The first step is preparation

1.1 Ensure that node.js is installed in your environment, which can be checked by running the node -v command

node: command not found
cnpm

npm install -g cnpm
Copy the code

After successful installation, we can use CNPM to install dependencies, which is very fast. 2.1 For convenience, we chose vUE’s official scaffolding tool vuE-CLI installation, which provides an out-of-the-box build tool configuration and brings a modern front-end development process. One minute to start projects with hot reloads, save time static checking, and build configurations available for production: # create a new project based on webpack template $vue init webpack my-project Vue init webpack my-project has some configuration options for developers to choose from. Let me briefly explain:

$NPM install $NPM run dev $NPM install $NPM run dev $NPM install $NPM run dev

At this point, we can see that a command line tool opens a local server with port 8080. After entering this address in the browser, we can open the page of vue. At this point, we can set up the environment of Vue + Webpack.

Step 3 Add SCSS, PUG dependencies (extensions)

Right now, our environment does not support SCSS, PUG syntax, so we need to “work” the configuration a little bit. Using SCSS, puG students believe that WebPack is already very smooth, I won’t go into details here, directly on the command line

Install support for PUG dependencies
npm install pug pug-loader pug-filters -D
# Install support for JADE dependencies
npm install jade jade-loader -D
Install support for SCSS dependencies
npm install sass sass-loader node-sass -D
Copy the code

After the installation is complete, go to the /build directory, open the webpack.base.conf.js file and find the following location:

{
  test: /\.scss$/,
  loader: 'style! css! sass? sourceMap'
},
{
  test: /\.jade$/,
  loader: "jade"
},
{
  test: /\.pug$/,
  loader: 'pug'
},
Copy the code

In this way, our.vue files can support puG, SCSS syntax example:

// Use pug syntax <template lang="pug">
  #app
    img.vue(src="./assets/logo.png"// Use SCSS syntax <style lang="scss"> *{margin:0; padding: 0} body{ background-image: url("/static/images/background.png");
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
      img.vue{
        width: 80px;
        height: auto;
      }
    }
  }
</style>
Copy the code

Build source code plus small projects