VUE前端框架学习知识大全（视图层）_前端视图层,

VUE（视图层）

一、知识准备

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

二、安装流程

1、安装node.js

1. 浏览器下载node：http://nodejs.cn/download/
2. 安装node软件：node-v16.14.2-x64.msi
3. 测试命令：node -v
4. npm管理器测试：npm -v

2、npm和cnpm安装——Node Package Manager

1. 安装cnpm：npm install -g cnpm --registry=http://registry.npm.taobao.org
2. 新增cnpm淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org
3. 重新更新npm镜像：npm i npm -g
4. 升级npm：cnpm install npm -g
5. 升级安装 cnpm：npm install cnpm -g
6. 最新稳定版：cnpm install vue

3、脚手架vue.cli安装——Vue CLI = Vue + js插件

1. 安装vue-cli脚手架构建工具：npm install -g vue-cli
2. 全局安装vue-cli：npm install --global vue-cli
3. 重新安装@vue.cli脚手架：cnpm i @vue/cli -g
4. 检验：vue -V

3、webpack静态模块打包器(module bundler)

1. webpack版本：webpack -v
2. 全局安装：npm install webpack webpack-cli –g
3. 删除程序包：npm uninstall <包名>
4. 删除程序包：npm uninstall -g <包名>
5. 更新程序包：npm outdated -g --depth=0
6. 淘宝镜像检测更新：cnpm outdated -g --depth=0
7. 更新程序包： npm update -g <包名>
8. 快速生成：npm init --yes

4、安装vue3.0(有UI)——Vue CLI = Vue + js插件

1. 安装VUE：npm install -g @vue/cli
2. 安装新脚手架：cnpm i -g @vue/cli
3. 查看commands：vue -h
4. 初始化脚手架：npm install -g @vue/cli-init

5、vue使用

1. VUE界面：vue ui
2. 创建项目：vue init webpack vue_test(项目文件夹名)
3. 自动创建项目：vue create 项目 / vue ui

6、安装依赖

1. 进入具体项目文件夹：cd vue_test（项目名）
2. npm install，回车，等待一小会儿

三、使用方式

四、语法实例

<div id="app">
  {{ message }}
</div>
1
2
3

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
1
2
3
4
5
6

四、目录结构

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 格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14

五、VUE组件：-g全局、@版本、脚手架（代码生成器）

1、npm（国外）: 包管理器(类似MAVEN)JavaScript写成

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

1. 下载安装命令：npm install jquery
2. 指定版本安装：npm install jquery@1
3. 查看安装路径：npm config get prefix
4. 设置全局安装程序包目录：npm config set prefix “E:\NpmInstall”
5. 设置全局缓存目录：npm config set cache “E:\NpmInstall\cache”

2、cnpm（国内）：淘宝镜像npm

1. 安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org

3、webpack(打包)：通过CommonJS的语法

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

1. 淘宝镜像安装 Webpack：cnpm install webpack -g
2. 创建项目目录：mkdir app
3. 目录添加 runoob1.js ：document.write(“It works.”);
4. 目录添加 index.html ： </script type=“text/javascript” src=“bundle.js” charset=“utf-8”></script/>
5. webpack 命令打包：webpack runoob1.js bundle.js

4、vue-cli：Vue工程模板（脚手架代码生成器）——Vue CLI = Vue + js插件

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

1. 全局安装vue-cli：npm install --global vue-cli
2. 查看版本：vue -V
3. 升级全局的Vue CLI 包：npm update -g @vue/cli
4. 升级全局的Vue CLI 包：yarn global upgrade --latest @vue/cli
5. 创建项目：vue create hello-world
6. 图形化界面：vue ui