It was very unconventional, but I had a need for it. Vue is suitable for developing SPA single-page applications, so even official documents and various materials and q&A on the network are also suitable for single-page application project configuration.

I also started to contact Vue recently for a variety of reasons, and found that Vue is relatively convenient for web pages that require a large number of data changes and component linkage. So the idea is to integrate TypeScript and Vue into the layui background and develop new and more complex pages.

This set of configuration, I spent 4 days to research out, but also to make up for the vacancy in this field. I’m just a developer who prefers the back end. There are a lot of multi-page apps out there, otherwise LayUI wouldn’t be so popular!

Gitee.com/yurunsoft/T…
Github.com/Yurunsoft/T…

The project of

IDE:
Development language:
JS library used:

JQuery, RequireJS, Vue (optional), others (layui you can integrate yourself)

Compilation tools:
TS code tip:

Realize the function

  • Code hinting

  • There is no error

  • Supports traditional multi-page entry development mode

Why use these tools to compose projects

I’ll start by explaining why I don’t use Webpack. As mentioned above, Webpack is better for single-entry, single-page applications. Traditional multi-page development mode, it is not impossible to use Webpack, you add a page to add a configuration, very troublesome.


TypeScript

TypeScript is a programming language developed by Microsoft that is a superset of JavaScript. You can develop using keywords like class, and TypeScript compiles your code into JavaScript code for you, and it will eventually run in non-ES6-enabled browsers!

Yes, I use TypeScript because it makes JavaScript easier to understand!


Vue

As mentioned above, you can choose whether to use Vue or not for this project.


RequireJS

RequireJS is a library that allows you to avoid manually writing <script> tags in your pages. It is also a solution to TypeScript import compilations that require JavaScript.


VSCode

I like ~

gulp

In order to achieve non-mainstream Vue component development. In this project, I split Vue component development into two files: template (template.html) and logic code (.ts).

The template. HTML file cannot be copied from the ts directory to the js directory depending on the TSC compilation of VSCode itself.

Method of use

  1. First of all, you need to have NodeJS and TypeScript.

  2. NPM install is executed in the project directory to install typings, gulp, and so on

  3. Typings Install is executed in the project directory to install the required files for code prompts

  4. Press Ctrl + Shift + B in VSCode to run the build task. Once you modify the.ts file, it will be automatically compiled into the JS directory.

Configuration changes

Depending on the actual project, you will definitely not use my demo directory structure, so you will need to change the directory.

Two files: tsconfig.json and gulpfile.js

./js and./ts are the generated target path and the original code path respectively.