[Vue] Build a development environment

 

When learning a new thing, we must first build up the development environment. Recently, I want to learn front-end technology. Vue's development environment is still relatively simple to set up. Here is a brief record

 

Build environment

1. Development Tools

---

• VSCode
• VSCode plugin-vue (syntax highlighting)

2. Operating environment

---

• Install Node.js
• View version information node -v

3. Package management tools

---

 

• npm (foreign source) is
  installed with node.js, view version information npm -v

• cnpm (Taobao source)

npm install -g cnpm --registry=https://registry.npm.taobao.org

• Installation package

npm install -g @vue/cli

 

• Uninstall package

npm uninstall vue-cli -g

 

4. Packaging tools

---

 

• Install webpack

npm install webpack -g

 

5. Install vue-cli (scaffolding)

---

 

vue-cli 4.0+ has been changed to @ vue / cli, if the old version is installed, uninstall it first

• installation

npm install -g @vue/cli

• Uninstall the old version of vue-cli

npm uninstall vue-cli -g

•  View version information
  vue -V (note that it is capitalized)
• use

1. Create a project: vue create projectName
2. Compile and hot update:npm run serve
3. Compile and compress: npm run build

 

practice

Create project

---

 

cmd to the folder where the project is to be created

1. Scaffolding creation project

1.1. Scaffolding creation  vue create my-project Note: The project name cannot be capitalized
. 1.2. Select the configuration (default / manual), select it by the up and down keys, and select the default here
. 1.3. Select the completion and press Enter to wait for the creation to complete.
1.4 The creation will generate a file with the same name folder

 

2. Create via ui

view ui

A creation page will open, where you can create projects, start debugging, compile and generate, etc. The UI is very simple and will not be introduced.

 

Commissioning

---

cmd to the project folder (not the folder created above, but the project name folder created by scaffolding / ui), execute

npm run serve

 

You must locate the corresponding folder each time you run it. This is more cumbersome. Here are a few tips for using it

If developed by VSCode, execute directly on the terminal

2. Execute through Powershell, open the corresponding folder, shift + right mouse button, and then choose to open Powershell here

3. Add cmd space in front of the folder path to directly locate the corresponding folder

 

 

Compile and generate

---

cmd execution

npm run build

Generate dist folder in project file

 

Deploy front-end files

---

1. Publish with background server (IIS, tomcat)

Copy the generated resource file to the static resource folder of the background server, and the background server sets the startup page

• advantage
  1. Simple, no need to deploy multiple servers
• Disadvantages
  1. Front-end personnel need to cooperate with back-end personnel
  2. After the release, there are debugging problems or need to be based on the back-end server

2. Independent front-end deployment

nginx acts as a web server for front-end resources and reverse requests for back-end servers

• advantage

1. The front and back ends are deployed separately to facilitate the inspection of documents
2. Front-end and back-end personnel reduce communication costs
3. Can solve cross-domain problems in nginx, no background server processing

• Disadvantages

1. Add complexity, but this is not much in nginx

nginx configuration file

    server {
        listen       80;
        server_name  localhost;

       
        location / {
            root   F:\Codes\Vue\my-project\dist;
            index  index.html index.htm;
        }

        location /api {
            proxy_pass   http://127.0.0.1:8080;
        }
}

 

Please indicate the source for forwarding: https://www.cnblogs.com/WilsonPan/p/12719082.html