Mobile application based on Vue+mint-ui (1)

This article contains the following content:

• Prepare node environment
• Create a vue project

1. Install the node environment

1. The download address is: Node.js

2. Check whether the installation is successful

D:\VueApp>node -v
v14.16.0

D:\VueApp>npm -v
6.14.11

If the version number appears, the installation is successful.

2. Create a Vue project

1. Use Taobao mirror source to install vue-cli

npm install -g @vue/cli --registry=https://registry.npmmirror.com

Check whether the installation is successful: if the version number appears, it is successful

 

2. Enter the project directory and create a new project: vue create project name, my name here is vue create vue-app-test

Problems that may be encountered:

①Encounter this problem to close all agents

vue-cli · Failed to download repo vuejs-templates/webpack: unable to verify the first certificate

②The reason for this is that the local port is set as an http proxy. It is estimated that the firewall is set. At this time, open the hosts file under C:\Windows\System32\drivers\etc with administrator privileges, and put this URL in Replace all the previous content with the previous content: hosts replacement  Note: This URL is on github, and it may not be opened, anyway, find a way to open it (manual dog head)

vue-cli · Failed to download repo vuejs-templates/webpack: connect ECONNREFUSED 127.0.0.1:443

If you have not encountered the above problems, then congratulations, here is a reminder that the project initialization is complete.

 3. Run

① Let's try it with the command prompted

 $ cd vue-app-test
 $ npm run serve

  ②Open the browser and enter localhost:8080, and find that it can be accessed. So far, our vue project has been created successfully

 ③Project structure, I use vs code to open the project here

1) node_modules: project dependent modules loaded by npm

2) src: development directory, basically everything to be done is in this directory. Contains the following directories and files:

•   assets: resource directory, where images, public js, and public css are placed. The resources here will be built by webpack
• components: components
• router: Front-end routing, the routing path we need to configure is written in index.js
• App.vue: root component
• mian.js: entry js file

3) index.html: home page entry file, you can add some mata information, etc.

4) package.json: npm package configuration file, which defines the npm script of the project and depends on package information

5) README.md: project description document, markdown format