https://github.com/LauItachi/vue-cli

> systeminfo
Microsoft Windows 10 Pro (10.0.17134)
....
> node -v
v10.13.0

• IDE: WebStorm (Education ver)
• MySQL: 云数据库 TencentDB - 关系型数据库 - MySQL

• FrontEnd: Vue
  • SinglePage: Vue Router
  • Communication Client: Socket.io - Client
  • UI: ElementUI
• BackEnd: Express
  • Communication Server: Socket.io - Server
  • DataStorage: MySQL

$ npm install -g @vue/cli
## Ubuntu needs sudo
..... # Installing
$ vue --version
3.0.5

ps: If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with npm uninstall vue-cli -g

If the version is 3.x, u can go Vue UI successfully

$ vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

Find your workspace, the workspace of IDE is better. mkdir is not needed, vue ui can help u with that.

找到自己的工作目录，推荐在IDE的workspace目录下，不需要单独新建文件夹，vue ui工具会帮忙建项目文件夹

Recommended manual configuration at the beginning, some settings are not necessary at that time.

一开始推荐手动，有一些配置在入手的时候没必要加

• Babel: a JavaScript compiler
• TypeScript: Not recommended
• PWA: Progressive Web App, not now
• Router: yeah we need it
• Vuex: state management pattern + library, well not yet
• CSS Pre-processors: yeah let's try this
• Linter: Format Checker, recommended for Non-formator or strict-formater
• Unit Testing: not yet
• E2E: not yet

According to your choices in Plugins, configure your configurations

根据在功能中的选择，需要进行相应的配置

Css Pre-processors : Less, well this is less

And finish it.

Vue-Cli is processing at whole time

• Project setup: npm install
• Compiles and hot-reloads for development: npm run serve
• Compiles and minifies for production: npm run build
• Run your tests: npm run test
• Lints and fixes files: npm run lint

单页应用的核心 https://router.vuejs.org/guide/

当前通过vue-ui创建的项目已经配置了vue-router，可以查看App.vue中的router-link标签，分别对应Home和About的页面或组件

Basic Chat Web App using Express.js, Vue.js & Socket.io

(用WebSocket被吐槽……推荐用Socket.io)

src:.
│  App.vue
│  main.js
│  router.js
│
├─assets
│      logo.png
│
├─plugins
│      element.js
│
├─components
│      Footer.vue
│      Header.vue
│      NavMenu.vue
│
└─views
       Content.vue
       Index.vue
       Login.vue

Recommend UI:

• element-ui
• semantic-ui
• muse-ui
• iviewui
• echarts

Use ElementUI to handle Layout & Container

That's a simple demo in my code:

server/util/mysql_util.js

Export sql_util for methods(init, query).