Vue Project Framework (PART 1)

The purpose of writing this article is to make myself more familiar with the basis and project structure of VUE-CLI scaffolding construction project. Secondly, I hope that my learning process can help students who have doubts. If there are any mistakes, I also hope to get advice

Js library (vue. Js, react.js). The configuration of the project framework is basically the same

That’s why I have a big face

Vue Project Framework (PART 1)

The Framework of the VUE Project (Part 2)

React With Your Bare hands

React Project Framework (Part 2)

First, preparation

1. Create the vueProject folder

Go to the root directory and initialize the project

cdVueProject NPM init -y // -y is the default valueCopy the code

The package.json file appears in the directory

2. Create a project structure

Create a new SRC folder under the root directory, and temporarily create a js file named index under SRC as the entry file

Create an index.html file in the root directory as the entry page

3. Use webpack

When you download Webpack, you may have problems downloading WebPack-CLI indefinitely because you didn’t install WebPack and Webpack-CLI globally first

// WebPack4. X start Webpack-CLI is brought out as a standalone package
Webpack-cli must be downloaded at the same time as webpack, and must be downloaded at the same time otherwise an error will be reported because the version does not match
cnpm install webpack-cli webpack --save-dev
Copy the code

Webpack can only pack JS modules by default, it can pack multiple JS modules you write into a SINGLE JS file, and finally introduce it in the entry page

Webpack4 starts out larger than configuration by default, in other words it doesn’t have to introduce a configuration file to package the project, so it has a lot of defaults

The default entry file is index.js from SRC, and the output is main.js from dist (it will be created automatically if there is no dist).

However, it is still highly configured, if necessary we can just create webpack.config.js in the project root directory to configure everything

Compared to previous versions of Webpack4, there is a mode option for configuration items with the option of “development” or “production” (the default). The difference is that development packages output files that are not compressed versions

4. Using the vue. Js

cnpm install vue@2 --save-dev
Copy the code

The index of js

// index.js
import Vue from 'vue'

new Vue({
    el: '#app',
    msg: 'hello vue'
})
Copy the code

index.html

//  index.html
<div id ="app">{{msg}}</div>
Copy the code

When you use Webpack to package the package, introduce the packaged file to the page and open the browser to run it, the following warning will be displayed

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. 
Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
Copy the code

This is because vue comes with two build versions of the code: the full version, which includes the compiler and the runtime, and the run-time only version

Solutions vary, and the official approach is to alias the vue

// webpack.config.js
module.exports = {
  // ...
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js"// Add vue/dist to vue/dist.Copy the code

After adding the above configuration and packaging, refresh the browser to display the value of MSG normally

The prep work is done here, but the functionality is in a hurry, so it’s time for WebPack to shine

Second, improve the functions of the framework

1. Use the webpack – dev server. –

Every time something new is written, it must be packaged using WebPack in order to see the effect, and we prefer it to be packaged and compiled automatically when the code changes

Webpack-dev-server can do that for us!

Download a.

cnpm i webpack-dev-server --save-dev
Copy the code

B. the use of

If you use webpack-dev-server as a command, it is completely impossible to use a locally installed package, because only globally installed packages can be used in the command line. Webpack-dev-server is a locally installed package, using a locally installed package. We need to configure scripts using package.json

// package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."dev": "webpack-dev-server"
},
Copy the code

Then use NPM run dev on the command line

npm run dev
Copy the code

Note the code excerpt below

NPM run dev > [email protected] dev C:\myProject\vueProject > webpack-dev-server I "WDS" : Project is running at http://localhost:8080/ I "WDS" : Webpack output is served from/I "WDS" : Content Not from Webpack is served from C:\myProject\vueProject I "WDM" : Hash: e70fb3AE9BF074915CAD Version: Webpack 4.35.0Copy the code

From here we know two things: first, our project is running on native port 8080, and second, the output of Webpack is in the root directory, so remember to change the path of index.htmlmain.js, otherwise you won’t see the new effects

But we don’t see the file in the root directory, because it’s in memory (which makes it faster to read and write), not on disk, and we can change the port and even open the browser automatically after compiling

The specific configuration can be the devServer item in WebPack

devServer:{
    host: '127.0.0.1',
    port: 8080,
    open: true
}
Copy the code

It can also be in the CLI, which is the most violent way, but the ports are still in devServer for later project configuration

// package.json
"scripts": {
    "dev": "webpack-dev-server --open --port 30000"
},
Copy the code

2. Use HTML – webpack – the plugin

Since putting main.js in memory can speed up reading and writing, can putting pages in memory speed up reading and writing even more?

The answer is yes! This can be done using the HTML-webpack-plugin

Download a.

cnpm i html-webpack-plugin --save-dev
Copy the code

B. the use of

// webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin')... plugins: [new htmlWebpackPlugin({
      template: path.join(__dirname, "./index.html"),
      filename: "index.html"})].Copy the code

The above code generates an index. HTML file in memory based on the index. HTML file on disk. When we check the page in the browser, we find that there is an extra script tag

// index.html
<body>
    <div id="app"> <h1>{{ msg }}</h1> </div> <! Delete or comment out <script SRC ="./main.js"></script> -->
</body>
Copy the code

Third, continue to improve the framework (project) function

So far the framework has been able to listen for changes on its own and react, but vUE itself is rudimentary, with no component functionality, no compilable styles, and so on. As mentioned earlier, WebPack can only handle JS files by default, but Loader allows WebPack to handle more types of files. Then use loader to continue refining it

1. Component function Vue-loader

The component function is the unique ecological VUE-loader of VUE. It can be seen from the official website that, in conjunction with vue-template-Compiler, the HTML, JS, and CSS in the component are separately presented to the corresponding loader for processing

Download a.

Both loaders need to be downloaded

cnpm i vue-loader vue-template-compiler --save-dev
Copy the code

B. the use of

In webpack. Config. Js

 module: {
    rules: [{ test: /\.vue$/, use: "vue-loader"}},Copy the code

If this is the only setting, the browser will report an error

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
Copy the code

/node_modules/vue-loader/lib/plugin /plugin /node_modules/vue-loader/lib/plugin

const VueLoaderPlugin = require("./node_modules/vue-loader/lib/plugin");

  module: {
    rules: [{ test: /\.vue$/, use: "vue-loader"}] }, plugins: [ ... new VueLoaderPlugin(), ... ] .Copy the code

2. Processing styles

CSS -loader and style-loader are used for processing styles

Download a.

cnpm i css-loader style-loader -save-dev
Copy the code

B. the use of

 module: {
    rules: [
        ...
      { test: /\.css$/, use: ["style-loader"."css-loader"]]}},Copy the code

But in the project we might use less or sass, it has its own loader for the same reason

Download a.

cnpm i less-loader -save-dev
Copy the code

B. the use of

 module: {
    rules: [
        ...
      { test: /\.less$/, use: ["style-loader"."css-loader"."less-loader"]} {test: /\.scss$/, use: ["style-loader"."css-loader"."sass-loader"]]}},Copy the code

3. Manipulate images

.test{ background-image: url(.. /imgs/11.jpg); }Copy the code

When we use url() in the component’s style, we get an error because vue-loader cannot handle urls, so we need to use url-loader

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file
Copy the code

Download a.

Url-loader uses file-loader internally, so both loaders need to be downloaded at the same time

cnpm i url-loader file-loader --save-dev
Copy the code

B. the use of

The basic usage is as follows

module: {
    rules: [
        ...
        { test: /\.(jpg|png|jpeg|gif|bmp)$/, use: "url-loader"} // include font, video format]},Copy the code

c.options

Careful students will notice that although the image can be displayed, the name and path of the image have changed when reviewing the elements. This is because url-loader compiles the image into memory and gives it a hash value as an identity. It calls the file when it is used the second time instead of the second time

An options object

 module: {
    rules: [
      {
        test: /\.(jpg|png|jpeg)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 8000, // Trigger the following setting name when the file byte size exceeds the limit:"[hash:8]-[name].[ext]"// This is an eight-bit hash code before the original name and suffix}}}]},Copy the code

Four, conclusion

At present, we have all the basic functions, but they are still not perfect. In the next period, VUe-Router will be introduced and the UI framework will be used to encapsulate the business. I hope it can help you