In my spare time, I plan to build a project based on Vite and use Node as the background support. The following is the whole process of the author’s project construction (many pits!).

I. Setting up the Web environment

Vite installation and creation project

Installation of a variety of ways, see their own needs to choose, the author is the first kind.

A:

  • Install vite globally
npm install -g create-vite-app
Copy the code
  • Install Vue3.0 projects using Vite
create-vite-app projectName
Copy the code
  • Install dependencies to run projects
CD projectName # install project dependencies NPM # run devCopy the code

Method 2:

  • Install vite
NPM NPM init @vitejs/appCopy the code
  • Project creation: To build a Vite + Vue project, run:
# NPM 6. X NPM init @vitejs/app demo --template vue # NPM 7+  npm init @vitejs/app demo -- --template vue # yarn yarn create @vitejs/app demo --template vueCopy the code
  • Run the project
cd demo
yarn/npm install
yarn dev/npm run dev
Copy the code

Three:

  • Create a project

Enter this command in a command window to create a Vite project

npm init vite-app demo
Copy the code
  • Run the project
cd demo
yarn/npm install
yarn dev/npm run dev
Copy the code

Start-up success

Configuring Router and VuEX

  • Configure the routing
// router/index
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = 
[  
 {    
    path: '/',
    name: 'Home',
    component: import('/@views/Home')
 }, 
 {    
    path: '/user',
    name: 'User',
    component: () => import('/@views/User')
 }
]
const router = createRouter({  
    history: createWebHistory(process.env.BASE_URL), 
    routes
})
export default router
Copy the code
  • Configuration vuex
// store/index
import { createStore } from 'vuex'
export default createStore({
    state: {},  
    mutations: {},
    actions: {},
    modules: {}
})
Copy the code

The project structure

- | public - | SRC - | assets / / static resources - | components / / vue components - | page / / page - | the router - | index. The routing configuration - | js / / store - | index. The js / / Vuex state management - | utils - | axios. Js/configuration/axios intercept - | App. Vue / / the main entry - | main. Js / / global configuration - | index. The CSS - | index. The HTML - | vite. Config. Js / / Vite configuration file (with the vue. Config. Js) - | package. The jsonCopy the code

2. Server environment construction

Node + Express builds the server

  • Express is a concise and flexible Node.js Web application framework that provides a series of powerful features to help you create a variety of Web applications, as well as rich HTTP tools.
  • Express is a quick way to build a fully functional website.
  • To use the epress framework, nodeJS must be installed first. This step is omitted. (NodeJS environment configuration is completed by default.)

Install express-Generator globally

npm install express --save -g
npm install express-generator --save -g
Copy the code

Express-generator Is an Express application generator, which is equivalent to the skeleton of Express. After entering a Web project, you can use the Express projectname command to quickly build the directory structure of the ProjectName application.

Create express project

express server
Copy the code

Install dependencies and project startup

The node server is named Server and the Vue project is named Web to facilitate full-stack development

CD server # install NPM # install NPM startCopy the code

If an error message is displayed indicating that the corresponding module cannot be found, run the following command

npm i http-errors --save -g
Copy the code

After starting the project, open the browser and enter localhost:3000 in the address bar to access it. In this case, the address is changed to 3001

The directory structure

- | bin - | WWW / / for application startup, Can be set up in the start port number, etc - | public static resource directory - - | | images / / javascripts - | stylesheets - | routes / / can be thought of as the controller (controller) directory, Routing - | views / / to the template directory for the jade, can be thought of as a view (view) directory - | app. Js / / main program file - | package. The json / /Copy the code

package.json

/bin/ WWW < node. /bin/ WWW > < node. /bin/ WWW >

bin/www

var app =require(“.. /app”) first load the app.js file

In the WWW file can be changed into the port number, the default is 3000, you can modify

app.js

App.js is the real entry for the whole project file loading the main dependency package, configuring the middleware, loading the route and finally starting the service in the WWW file

routes/index.js

The server connects to the mysql database

Mysql installation

The background database is based on mysql, so you need to install mysql before development. If the mysql environment has been installed, you can skip it

Download and install mysql

Mysql download address: dev.mysql.com/downloads/m…

Mysql installation files are available in.msi and.zip

  • .MSI requires installation

  • Zip format is decompressed by yourself. After decompression, you can actually use MySQL, but you need to configure environment variables. Zip format is decompressed by yourself

My Computer -> Properties -> Advanced System Settings -> Environment Variables -> System Variables

Find Path in the system variable and add the Path to your installed mysql bin folder

Check whether the installation is successful

Use the MySQL management software (Navicat for MySQL) for connection testing to make sure MySQL is ready to use

Those without Navicat can check out this article www.jb51.net/article/199…

Install mysql dependencies globally

npm install -g mysql
Copy the code

Fourth, the Web end and the server end are coordinated, and the development of the front and back end is separated

Unfinished to be continued, after work to continue to work