vue的认识===下载

Posted 2021-03-22 xinzaiyuan

VUE：不建议直接操作DOM

Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微
胜出，并且它的热度还在递增

Vue的核心库只关注视图层，Vue的目标是通过尽可能简单的 API 实现响应的数据绑定，在这一点上Vue.js类似
于后台的模板语言

Vue也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA - single
page application)系统

• Vue.js使用文档已经写的很完备和详细了，通过以下地址可以查看： https://cn.vuejs.org/v2/guide/

• vue.js如果当成一个库来使用，可以通过下面地址下载： https://cn.vuejs.org/v2/guide/installation.html

Vue下载

• cnpm 安装

升级npm：cnpm install npm -g
npm config set cache "C:
odejs
ode_cache"
npm config set prefix "C:
odejs
ode_global"
安装cnpm： 一个国内的npm安装工具

• 安装淘宝镜像中的

cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org

• 设置安装包路径

cnpm config set cache "C:
odejs
ode_cache"

• 设置模块安装路径：

cnpm config set prefix "C:
odejs
ode_global"

之后使用命令安装的模块存储在C:
odejs
ode_global
ode_modules里

• 使用cnmp安装vue：

cnpm install vue -g

• 安装vue命令行工具：

cnpm install vue-cli -g

vue-devtools调试工具

• 下载vue-devtools：

git clone https://github.com/vuejs/vue-devtools

• 进入到vue-devtools目录下安装依赖包：

cd vue-devtools-dev 
cnpm install 
cnpm run build
cnpm install yargs 
cnpm install acorn 
cnpm insatll global-prefix 
cnpm insatll @vue/component-compiler-utils 
cnpm install vue-style-loader

• 修改shells>chrome文件夹下的mainifest.json 中的persistent为true

cnpm install sockjs 
cnpm install express 
cnpm install body-parser 
cnpm install merge-descriptors 
cnpm install finalhandler 
cnpm install on-finished 
cnpm install parseurl 
cnpm install statuses 
cnpm install unpipe 
cnpm install path-to-regexp 
cnpm install methods 
cnpm install utils-merge 
cnpm install setprototypeof 
cnpm install safe-buffer 
cnpm install send 
cnpm install proxy-addr 
cnpm install type-is 
cnpm install vary 
cnpm install raw-body 
cnpm install serve-static 
cnpm install serve-index 
cnpm install http-proxy-middleware 
cnpm install http-proxy 
cnpm install eventemitter3 
cnpm install requires-port 
cnpm install follow-redirects 
cnpm install webpack-dev-middleware 
cnpm install selfsigned 
cnpm install node-forge 
cnpm install opn 
cnpm install is-wsl

• 注意：在console界面下访问Vue的实例及其内部属性，要记得加$符号；自己定义的变量不加。

Vue-CDN

• 两个版本的vuejs：CDN
• vue.js：开发版本，包含了有帮助的命令行警告

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

• vue.min.js：生产环境版本，优化了尺寸和速度

<script src="https://cdn.jsdelivr.net/npm/vue"></script>