first vue.js project

Time:2021-4-17

Write on the front

This article is mainly for just touching the front end orvue.jsThe purpose of this paper is to run a Vue project smoothly!

Zero, environment building

First, install node and NPM (automatically skip those that have been installed), and open theNode website
first vue.js project

Whether it’s windows or Mac, English or Chinese, it’s almost the same.
LTSIt’s a stable version, and the other is the latest version. The difference is that the new version may have some new functions, but it may not be very stable. Just click any one (but I always install the latest version?).

Then click the latest version on the right to download an installation package. Then find the download location and click Install.
first vue.js project

Failed to download should be a network problem, just download again.

In addition, NPM will be automatically installed when node is installed, so there is no need to manually install NPM for the time being. Then there is a fool like operation. Click “continue”, “agree” and “Install” all the way, and you will be prompted that the installation is successful.
first vue.js project

We can also ignore the prompt (or no prompt), and finally just test it with the command line to see if the installation is successful

node -v
npm -v

If you get the following results, the installation is successful:
first vue.js project

So far, the node environment has been built!

This step is also very simple. You don’t need to configure environment variables manually.

1、 Installation scaffold — Vue cli

In order to avoid the waste cost of building the whole project from zero, Vue officially provides a scaffold to directly generate the basic engineering——vue-cliFor beginners, it’s faster to start, and then install scaffolding tools:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

The successful installation is like this+ @vue/[email protected]The installation is successful
first vue.js project

yarnWithnpmIt is also a package management tool, which can be used directlyyarnIf you report an error, you can install it first, which is provided by the official websiteInstallation method

If you thinknpmIf the speed is slow, it can be changed to domesticTaobao NPM image

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

Then you can use itcnpm installInstall the dependency (but I don’t usually use it)Cnpm's)。

2、 Initialization project

stayvue-cli3.0At the beginning, it provides a graphical interface, which is more intuitive and easy to operate than the previous command line initialization, and the data analysis and state management after the start of the project are more clear.

If there is no problem in the above steps, run this command to start locally8000Port and open browser automatically:

vue ui

The effect of browser opening is as follows:
first vue.js project

Then click “create” – > “create a new project here”, and the basic information configuration page will appear:
first vue.js project

Next, enter the name of the project (e.gmy-app), and then click “next” to go to the following interface:
first vue.js project

Then click “create project”, followed by a waiting time to create the auto create project and install the related dependencies.

You can choose the default one first, because it can be modified later.

After success, you will see this interface:
first vue.js project

Then, as shown in the figure below, click task > serve > run in turn:
first vue.js project

It will start in a few seconds, and the right panel will change to something like this. The following information of this compilation will be displayed:
first vue.js project

If the above panel prompts “compilation success” or “success” and other similar states, it means that the project is started successfully, and then it can be opened with a browserhttp://localhost:8080:
first vue.js project

3、 Modify project

If the project is created successfully, what happens next?
When initializing the project, there will be the path of the folder, which is better to the corresponding folder in its own folder, such as my namemy-app
first vue.js project

Then directly open the folder through the editor, and then find the corresponding file to modify and save.

Write it at the back

This article has no code, just want to just contact the front end andvue.jsA basic guide, code is not synchronized togithubI’m on it;
For details, principles andvue.jsGrammar does not do a detailed description, just want to be able to run a smoothvue.jsHello world!

Recommended Today

Quickly use the latest 15 common APIs of vue3

Before that, I wrote a blog to introduce the new features of vue3. I had a brief understanding of the features of vue3, and at the end of the article, I gave you a little experience in vue3Compsition APISimple use of Address of last article: follow Youda’s steps and experience the new features of vue3 […]