Write on the front
This article is mainly for just touching the front end or
vue.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：
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.
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.
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:
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
npmIt is also a package management tool, which can be used directly
yarnIf you report an error, you can install it first, which is provided by the official websiteInstallation method。
If you think
npmIf 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 it
cnpm installInstall the dependency (but I don’t usually use it)
2、 Initialization project
vue-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 locally
8000Port and open browser automatically:
The effect of browser opening is as follows:
Then click “create” – > “create a new project here”, and the basic information configuration page will appear:
Next, enter the name of the project (e.g
my-app）, and then click “next” to go to the following interface:
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:
Then, as shown in the figure below, click task > serve > run in turn:
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:
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 browser
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 name
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 and
vue.jsA basic guide, code is not synchronized togithubI’m on it;
For details, principles and
vue.jsGrammar does not do a detailed description, just want to be able to run a smooth