MAC+PyCharm+Flask+Vue.js build system

Configure node.js+nvm+npm

Visit the official github address and install the Mac version of nvm according to the official documentation, click here

It is recommended to use nvm to install and manage Node.js

cURL:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

Wget:

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

After nvm is installed, restart the terminal and then install Node.js:

nvm ls-remote

Use the above command to view the remote node version, and then install the latest version of Nodejs as needed:

nvm install 15.3.0

After installation is complete, you can use

nvm list

To view the installed nodejs version, and use

nvm use version number

To use the corresponding version of nodejs.

nvm use 15.3.0

You can use the following command to view the current node version

node -v

npm switch Taobao mirror

Temporary

Temporary command:

npm --registry https://registry.npm.taobao.org install express

Long-lasting

By command like:

npm config set registry https://registry.npm.taobao.org

After the configuration is complete, you can use the following command to get the current configuration.

npm config get registry

Install Vue.js

Here I install vue.js in my node.js=15.3.0.

Install the vue-cli scaffolding building tool:

npm install -g @vue-cli
npm install -g @vue/cli-init

After the installation is complete, enter the following command to verify whether it is successful:

vue --version // If there is a version number, it proves that the installation is successful

Install webpack:

npm install -g webpack

Create and run a Vue.js project

Online initialization

Use the cd command to enter the project directory, and then use the following command to initialize the project (download the template):

vue init webpack visProject

Then enter the project directory and install the project dependencies to get the node-modules directory:

npm install

Offline mode

Since the above method is used, it is always displayed in the downloading template. Webpack is used as the template here, so I consider using the offline method for initialization.

First, download webpack. You can download it from gitee. Download link: click here
After the download is complete, look for a .vue-templates folder in the hidden files under the user directory. If not, create one using the following command:

mkdir .vue-templates

After the creation is complete, unzip the downloaded file, rename it to webpack, and then place the folder in the directory. Then go back to your previous directory and enter the following command to initialize offline:

vue init webpack project name --offline

The initial configuration is as follows:

After initialization, use the following command to add the current execution environment to the node_modules folder:

npm install

Run the project

After completing the above configuration, use cd to enter the project folder and use the following command to compile the project:

npm run dev

After the compilation is complete, you can access it through localhost. The following page appears, indicating that the operation is successful.

src file and its function

Solve the problem of not opening

Here, since the default port 8080 is occupied, you can modify the configuration file to assign a new port to it.

Configuration file directory: ~/config/index.js

Just change the port number corresponding to the port in the dev category to 8083.

Then recompile using the following command:

npm run dev

Configure Flask

The IDE tool used here is: PyCharm. I won’t go into details about setting up the Python environment here. There are many tutorials on the Internet.

Install Flask

Use the following command to install the flask library: Here I use Anaconda for package management.

conda install flask

But here, if I use PyCharm to create a new project, I can choose to create a flask project directly, as follows:

In this case, flask will be automatically installed in the selected interpreter.

Here I use the former, so I need to install flask manually. After installation, use PyCharm to create a new Flask project, as shown in the figure above. After the creation is completed, we will get the following:

Run the app.py file, and we can get the following interface by accessing http://127.0.0.1:5000/.

This indicates that our configuration is complete. In summary, we have configured vue and flask respectively, and we will show how to use them later.

This is the end of this article about MAC+PyCharm+Flask+Vue.js system construction. For more relevant Flask Vue.js system construction content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!