VUE front-end framework learning knowledge (view layer)

VUE (View Layer)

1. Knowledge preparation

构建用户界面
渐进式框架
可自底向上逐层应用
简洁的模板语法来声明式地将数据渲染进 DOM 的系统
npm 是 JavaScript 世界的包管理工具
npm 是是 Node.js 平台的默认包管理工具
npm集成在node中
通过 npm 可以安装、共享、分发代码、管理项目依赖关系

Second, the installation process

1. Install node.js

1. Browser download node: http://nodejs.cn/download/
2. Install node software: node-v16.14.2-x64.msi
3. Test command: node -v
4. npm manager test: npm -v

2, npm and cnpm installation - Node Package Manager

1. 安装cnpm：npm install -g cnpm --registry=http://registry.npm.taobao.org
2. Add cnpm Taobao mirror: npm install -g cnpm --registry=https://registry.npm.taobao.org
3. Re-update the npm mirror: npm i npm -g
4. Upgrade npm: cnpm install npm -g
5. Upgrade and install cnpm: npm install cnpm -g
6. Latest stable version: cnpm install vue

3. Scaffolding vue.cli installation - Vue CLI = Vue + js plugin

1. Install the vue-cli scaffolding build tool: npm install -g vue-cli
2. Install vue-cli globally: npm install --global vue-cli
3. Reinstall the @vue.cli scaffold: cnpm i @vue/cli -g
4. Check: vue -V

3, webpack static module bundler (module bundler)

1. webpack version: webpack -v
2. Install globally: npm install webpack webpack-cli –g
3. To remove a package: npm uninstall <package name>
4. To remove a package: npm uninstall -g <package name>
5. Update package: npm outdated -g --depth=0
6. Taobao mirror detection update: cnpm outdated -g --depth=0
7. Update packages: npm update -g <package name>
8. Quick build: npm init --yes

4. Install vue3.0 (with UI) - Vue CLI = Vue + js plugin

1. Install Vue: npm install -g @vue/cli
2. Install new scaffolding: cnpm i -g @vue/cli
3. View commands: vue -h
4. Initialize scaffolding: npm install -g @vue/cli-init

5. Vue use

1. VUE interface: vue ui
2. Create a project: vue init webpack vue_test (project folder name)
3. Automatically create projects: vue create project/vue ui

6. Installation dependencies

1. Enter the specific project folder: cd vue_test (project name)
2. npm install, press enter, wait for a while

3. How to use

4. Grammar Examples

<div id="app">
  {
   
   { message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Fourth, the directory structure

build 项目构建(webpack)相关代码
config 配置目录，包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src 开发目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件
assets: 放置一些图片，如logo等。
components: 目录里面放了一个组件文件，可以不用。
App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js: 项目的核心文件。
static 静态资源目录，如图片、字体等。
test 初始测试目录，可删除
.xxxx文件 这些是一些配置文件，包括语法配置，git配置等。
index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档，markdown 格式

5. VUE components: -g global, @version, scaffolding (code generator)

1. npm (foreign): package manager (similar to MAVEN) written in JavaScript

作用：node包管理器、程序包管理和分发的管理工具
位置：已经集成在NODE.JS中

1. Download and install command: npm install jquery
2. Specify the version to install: npm install jquery@1
3. View the installation path: npm config get prefix
4. Set the global installer package directory: npm config set prefix “E:\NpmInstall”
5. Set the global cache directory: npm config set cache “E:\NpmInstall\cache”

2. cnpm (domestic): Taobao mirror npm

1. Install Taobao mirror: npm install -g cnpm --registry=https://registry.npm.taobao.org

3. webpack (packaging): through CommonJS syntax

作用：前端资源加载/打包工具、多种静态资源 js、css、less 转换成一个静态文件

1. Taobao mirror to install Webpack: cnpm install webpack -g
2. Create a project directory: mkdir app
3. Add runoob1.js to the directory: document.write("It works.");
4. Add index.html to the directory: </script type="text/javascript" src="bundle.js" charset="utf-8"></script/>
5. webpack command packaging: webpack runoob1.js bundle.js

4. vue-cli: Vue project template (scaffolding code generator) - Vue CLI = Vue + js plugin

作用：快速创建 vue 项目、基于 Vue.js 、降低webpack使用难度

1. Install vue-cli globally: npm install --global vue-cli
2. View version: vue -V
3. Update the global Vue CLI package: npm update -g @vue/cli
4. Upgrade the global Vue CLI package: yarn global upgrade --latest @vue/cli
5. Create a project: vue create hello-world
6. Graphical interface: vue ui