VUE目录

  • VUE（视图层）
  • 一、知识准备
  • 二、安装流程
  • 1、安装node.js
  • 2、npm和cnpm安装——Node Package Manager
  • 3、脚手架vue.cli安装——Vue CLI = Vue + js插件
  • 3、webpack静态模块打包器(module bundler)
  • 4、安装vue3.0(有UI)——Vue CLI = Vue + js插件
  • 5、vue使用
  • 6、安装依赖
  • 三、使用方式
  • 四、语法实例
  • 四、目录结构
  • 五、VUE组件：-g全局、@版本、脚手架（代码生成器）
  • 1、npm（国外）: 包管理器(类似MAVEN)JavaScript写成
  • 2、cnpm（国内）：淘宝镜像npm
  • 3、webpack(打包)：通过CommonJS的语法
  • 4、vue-cli：Vue工程模板（脚手架代码生成器）——Vue CLI = Vue + js插件


VUE（视图层）

一、知识准备

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

二、安装流程

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>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

四、目录结构

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 格式

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

1、npm（国外）: 包管理器(类似MAVEN)JavaScript写成
作用：node包管理器、程序包管理和分发的管理工具
位置：已经集成在NODE.JS中
  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. 淘宝镜像安装 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. 全局安装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