Let’s talk about why we want to write this UI library first.

I am a graduate of an unknown university in nineteen nineteen, and began to practice in April nineteen nineteen. Sometimes I learn/see some things in my ordinary work (collect, like), but then I don’t… So feel not good, still have something to settle down, otherwise later change work even thing to others see all have no. Secondly, it is also a re – study of their own knowledge. Other thought to continue to ridicule, then into the body.

knowledge

Say is vue UI library, that would not bottom go to, the vue sure vue here I personally think vue official document writing is really good, every time go to have a new found (may be I didn’t go to the full, every time a novice can only look at the tutorial, a bit of a basic look at API), didn’t find want to baidu or Google (want to believe, The hole you stepped on must have already been trodden, but you just asked the wrong way. Of course JavaScript is certainly also want, here is I recommend two websites Ruan Yifeng ES6 tutorial and JavaScript tutorial, I personally feel that these two is enough.

Start your one-man show

The environment

  • First, you need to install Node. How? Click here. Official website one key fool installation.
  • Second, scaffolding (vue-CLI). If you have completed the first step (if you can’t download Node, I can’t help it, hahaha), you can just open the command line and run NPM install -g@vue /cli (this is available on vue website).
  • Installation too slow? Installation failure? Try switching to taobao mirror. What? What is Taobao mirror? Emmmmm is something that allows you to install faster. How to switch, I also provide here (after installation can use CNPM)
Install CNPM NPM install - g CNPM - registry=https://registry.npm.taobao.org to view the current mirror NPM config get registryCopy the code

Set up

Open a folder with vscode (whatever you’re comfortable with) and then open terminal

Vue create TLS-UI (tlS-UI is your project)

1. Select the installation mode, as shown below (automatic above, manual below). I choose manual. I will give you an overview here. If you want to see more details, please go to the official website

  • Babel // transcoder, which can convert ES6 code to ES5 code for execution in existing environment.
  • TypeScript// TypeScript is a superset of JavaScript (postfix.js) (postfix.ts) that contains and extends JavaScript syntax and needs to be compiled and output to run in the browser
  • Progressive Web App (PWA) Support// Progressive Web applications
  • Router // VUE Router (vUE Router)
  • Vuex (State management mode of VUE)
  • CSS pre-processors // CSS pre-processors (e.g. Less, Sass)
  • Linter/Formatter // Code style checking and formatting (e.g. : ESlint)
  • Unit Testing // Unit tests
  • E2E Testing // E2E (End to end) Testing

    I choose toBabel、CSS Pre-processors、Linter / Formatter(Because this is just a component library, no routing is needed)

    Here is to choose CSS preprocessing, I choose the second one, the first one is also ok, and the first one is relatively fast, the second one also often fails to download (but I still like the second one), why not choose the third and fourth one? Because I can’t

    This is the code check, so I’m going to pick the first oneESLint with error prevention onlyI think I’ve used other ones before. Wow, they’re killing me. Of course, you can choose the third code specification if you want to exercise it.

    So when does this check, just pick the first one, check it when you save it

    Where do you want to generate the configuration filepackage.json(Emmmmmm, I don’t know the first one)

    This says whether to use the same configuration next time, I will choose N, and then wait for the project to be created.

run

NPM Run Serve (start project)Copy the code

The next article will start to write components, if you see here, I hope you give me some time to write down, or where write wrong write bad, please help to put forward, because I am the first time to write so formal (except my graduation design), thank you.

Today (2020.03.10), because I also began to write the UI library, I will try to save the project and articles written at the same time update (common to work during the day, the company is far away from the dormitory, come back in the evening have time will write and update articles, is impossible to work overtime this weekend, the weekend to relax lol, when I write here, The project has not been created yet, I really ****, really is the problem with node-sass, if you usually fail to install node_modules, I recommend to uninstall the whole node_modules and then reinstall it.