1. Create a folder and name it as required
2. Create the README and LICENSE file in the folder
- (1) As a project, the first and most important thing is README and LICENSE. README is to let people who use your project know how to use it, while LICENSE determines the LICENSE scope of your project
- (2) Not writing does not affect the operation of any program, but it is a public project must
3. Create a package. Json
- (1) Since we are writing projects based on Node, this is how NPM defines a package
- (2) Since projects are not normally distributed as packages, private:true is now added to package.json to indicate that the package is private and should not be distributed
{
"private":true
}
Copy the code- (3) Add Cli dependencies for the project (on demand)
3.1 In the past, we directly used Vue CLI generated projects, package.json automatically generated, but in fact, we do not need some of them
{" name ":" app ", "version" : "0.1.0 from", "private" : true, "scripts" : {" serve ":" vue - cli - service serve ", "build" : "Vue - the cli - service build"}, "dependencies" : {" core - js ":" ^ 3.6.5 ", "vue" : "^ 2.6.11", "vue -- baidu map" : "^ 0.21.22 vue -", "json" : "^ 0.1.8", "vue - the router" : "^ 3.2.0", "vuex" : "^ 3.4.0"}, "devDependencies" : {" @ vue/cli - plugin - Babel ":" ~ 4.4.0 ", "@ vue/cli - plugin - the router" : "~ 4.4.0", "@ vue/cli - plugin - vuex" : "~ 4.4.0 @", "vue/cli - service" : "~ 4.4.0", "sass" : "^ 1.26.5", "sass - loader" : "^ 8.0.2", "vue - the template - the compiler" : "^ 2.6.11}}"Copy the code3.2 Adding dependencies to the project
- npm i -D @vue/cli-service
{" private ": true," devDependencies ": {" @ vue/cli - service" : "^ 4.5.6"}}Copy the code- Install Vue (NPM I Vue)
{" private ": true," devDependencies ": {" @ vue/cli - service" : "^ 4.5.6"}, "dependencies" : {" vue ":" ^ 2.6.12 "}}Copy the code- Install the compiled plug-in for Vue single-file components (NPM I-D VUe-template-compiler)
{
"private": true,
"devDependencies": {
"@vue/cli-service": "^4.5.6",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"vue": "^2.6.12"
}
}
Copy the code- Note (1) : devDependencies and dependencies are related to the command to install;
We installed @vue/cli-service and vue-template-complier with -d. This -d (or –save-dev) parameter is used to indicate that the package is for development
- Note (2) : This is important if you want to publish a package. Node is originally designed for use in the backend, so the package in devDependencies should eventually be installed in production. The package in devDependencies is for development and should not be installed in production. The volume of the production package can be reduced
- Note (3) : As a publisher, you don’t want to release all of these dependencies together. How do you distinguish between the two? Vue is a necessary runtime dependency to run on various platforms. We put it in Dependencies. @vue/cli-service is the CLI tool of Vue, and vue-template-compiler is the compiler of Vue. Once a component is built, we don’t need these tools anymore, we can just run them with the code we’ve built
4. Create a directory structure for the project
- Since we used the command tool @vue/cli-service provided by the Vue CLI, we could not create it randomly. According to its requirements, the required file is the SRC directory
- (1) Now create a SRC directory under the root directory
- (2) Create the main.js entry file in the SRC directory
- (3) With these foundations in place, we need to add a command to run the development service
Before adding, a word about NPM’s NPX command
| (1) We can start a development environment by using the NPX vue-cli-service serve command |
|---|
| (2) NPX is a command that comes with NPM |
| — |
| (3) When running NPX, you can directly run a dependency package provided by the command, if the dependency package is not installed in the local, then it will download the package before running |
| — |
| Error: SRC /main.js cannot be found |
 |
| — |
| (5) When you switch to the root directory to execute again, you will find that it is successful |
 |
| NPX runtime and directory – dependent |
- (4) We don’t want this, and we also want our collaborators to be able to launch the same development environment with a single command, rather than remembering long commands each time, so we can add commands to package.json
{"scripts": {// define start command, used to run vue-cli-service command "start": "vue-cli-service serve"}}Copy the code- (5) Now you can access localhost:8080, see a vUE blank page
- (6) SRC /main.js
import Vue from "vue"; Const app = new Vue({//render) const app = new Vue({//render) (createElement) => createElement("div", "Hello World"), }); $$mount(document.body); $$mount(document.body); // After saving, the page will display Hello WorldCopy the code
- (7) Install vue Devtools (vue version 2.6.12, error reported)
- (8) The error was caused by mounting the vue instance to the body node. Vue replaced the body node with the DOM node of the root component. Because we used the Vue CLI, the HTML template of the vue cli already defined the mount node #app, so the error will not be reported when mounting the instance to this node
app.$mount("#app");
Copy the code- (9) It’s not very convenient to write the render function in main.js. It’s not necessarily possible to write the entire project in one file, so we need to create app.vue in the SRC directory
<template> <div>Hello World</div> </template>Copy the codeVue import App from "./ app.vue "; Const app = new Vue({// render function createElement => createElement(app),});Copy the code- (10) At this point, run the vue project and you can see Hello World on the page
- Note (1) : Finally, let’s talk about whether components need to be registered. Components do not have to be registered to be used. The purpose of registration is to be placed in the cache, which can be directly called by the component name
- Note (2) : When NPM acts as the package manager, installing dependencies produces a package-lock.json file that locks the installation package version and file information. This file is submitted together to facilitate team development collaboration