Vue.js installation and simple use, detailed introduction

You must have node.js before preparing Vue.js.

• Node.js installation URL: https://nodejs.org/en/download/.

• Reference for specific installation steps: https://www.runoob.com/nodejs/nodejs-install-setup.html

vue.js has the famous family bucket series

包含了vue-router，vuex， vue-resource，
再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。

After installation, it is necessary

Install Vue.js.

1. Install node.js, after installing node.js, npm will also automatically install

   Command to check whether the installation is successful:

   node -v
   
   npm -v
   

   

2. Install the scaffolding tool vue-cli globally, the command is as follows:

   npm install --global vue-cli
   

   

3. The vue project initialization command is as follows, if webpack is not installed, install webpack first

   npm install -g webpack   // 安装 webpack
   npm cache clean --force    // 清除 npm 缓存
   

   project

   vue init webpack myVue // myVue 项目名称
   
   project name（项目名称）  按回车
   
   project description（项目描述） 按回车
   
   author（作者） 按回车
   
   vue build（解释器） 按回车
   
   Install vue-router(路由) 按y按回车
   
   use aslantto lint your code(代码检查) 按n按回车
   
   set up unit tests(测试模块) 按n按回车
   
   setup e2e tests with night watch(是否安装e2e) 按n按回车
   
   should we run ’npm install’(是否选择npm方式)选第一个，按回车
   

• The vue project directory after initialization is as follows:
  

4. Go to the myVue directory and use npm install to install the dependencies in the package.json package

   The command is as follows:

   cd myVue
   
   npm install
   

   

5. Run the project:

   npm run dev
   

   
   
   Enter: localhost: 8080 on the browser, the following vue initial page will appear:

   

6. End project operation:

   ctrl + c, select Y to stop the project

   

Second, the vue project directory description

file name	Introduction
build	Project build (webpack) related code
config	Configuration directory, including port number, etc.
node_modules	Project dependency blocks loaded by npm
src	Here is the directory we want to develop, basically everything to do is in this directory. It contains several directories and files:
assets	Place some pictures, such as logo, etc.
components	Our development file components stored in this directory, the main development files are stored here
View app	Project entry file
main.js	The core document of the project
router	Routing configuration directory
static	Place some static resource files
test	The initial test directory can be deleted
.xxxx file	These are some configuration files, including syntax configuration, git configuration, etc.
index.html	Home Entry Document
package.json	Project configuration file
README.md	Project documentation, markdown format

Three, vue project startup process

1. When executing npm run dev, it will find the package.json file in the project under the current folder and start the development server. The default port is 8080;

   

2. Find the main.js file of src, the instance of new Vue in this file, the template content App to be loaded;

   

3. App is the file at the end of App.vue in the src directory;

   

4. In the template corresponding to App.vue, there is a router-view in the src directory with a router folder. This folder has an index.js file. This file is the configuration routing dictionary, and the specified routing address is empty. Load HelloWorld component

   

注：刚才也说过了，vue运行是基于node环境的，所以 构建vue框架之前，一定要确保node环境安装成功

Fourth, the use of Vue components

1. In the componentscreation of the end .vue folder file

   For example: src/components/public/New directory header.vuefile

   

   The content of the header.vue file is as follows:

   

2. Introduce components in the routing configuration file src / router / index.js and configure component routing

• Introduce components

  import Header from '@/components/public/header'
  

• Configure component routing

  {
  	path: '/header',
  	name: 'header',
  	component: Header
  }
  

  

3. Run the project:npm run dev

4. Enter in the browser: localhost: 8080 / header, the following page is displayed:

   

Attached: vue life cycle diagram

Reference original address: https://baijiahao.baidu.com/s?id=1621989444415819861&wfr=spider&for=pc