• vue.js学习笔记


    1.Vue的介绍

    Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

    Vue 只关注视图层, 采用自底向上增量开发的设计。

    Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    2.Vue的安装方式

    重点参考

    https://blog.csdn.net/u011342720/article/details/81267908?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3

    https://www.jianshu.com/p/9c1d4f8ed068

    1.独立版本

    我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

    2、使用 CDN 方法

    以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。

    3.NPM 方法

    首先介绍下npm的概念

    包管理工具?

      在开发过程中使用jquery,那么是不是要引入jquery,你可能会下载这个jquery.js文件, 然后在代码中<script src="jquery.js"></script>是吧;

     如果使用 npm  ,那么就方便了,直接在npm下使用命令:$ npm install jquery;就自动下载了;在远端有一个npm服务器,里面有很多别人写的代码,我们可以直接使用npm下载使用;

     同时你也可以把自己写的代码推送到npm 服务器,让别人使用;类似于java里面的maven管理工具,npm服务器就类似于中央仓库。

    3.windows下面安装vue.js

    先下载Node.js,网站https://nodejs.org/en/

    推荐下载左侧的稳定版

     第二步:

    node.js安装,运行下载后的.msi文件,一路下一步就可以了,安装之后运行cmd,执行node -v 和 npm -v命令

    如果看到下面的提示,则显示安装成功

     2.配置npm的全局模块的存放路径以及cache的路径,我选择的路径使Node.js的安装路径,在此路径下建两个文件夹node_global 和 node_cache,现在的文件目录如下

     执行如下命令

    npm config set prefix "C:Program Files odejs ode_global"

    npm config set cache "C:Program Files odejs ode_cache"

    安装cnpm

    说明:由于许多npm包都是在国外,我们这里用到淘宝的镜像服务器,来对我们依赖的module进行安装,因此首先安装“中国的npm”——cnpm

    参考网址如下:http://npm.taobao.org/

    安装命令为:

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

     首先进入目录

     win10系统需要按Win+X,再按A才有权限这里不建议安装再C盘的program 

     

    设置环境变量

    说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径

    1、鼠标右键”此电脑”,选择“属性”菜单,在弹出的“系统”对话框中左侧选择“高级系统设置”,弹出“系统属性”对话框。 
    修改用户变量PATH:

    选中PATH,点击编辑,在已有的变量后面,加入英文的”;”,然后把“C: odejs ode_global
    新增系统变量NODE_PATH:

    在下面的系统变量中点击新建,弹出下框,把变量值设置成“C: odejs ode_global ode_modules”

     

    用cnpm安装vue

    cnpm install vue -g

     

    安装vue命令行工具

    cnpm install vue-cli -g

    创建工程

    用cd命令来到你将要新建工程的目录,如“C:vueproject”

    vue init webpack myproject

    3、定位到C:vueprojectmyproject的工程目录下

    cd C:vueprojectmyproject

    4、安装该工程依赖的模块,这些模块将被安装在:mytest ode_module目录下,node_module文件夹会被新建,而且根据package.json的配置下载该项目的modules

    cnpm install

    5、运行该项目,测试一下该项目是否能够正常工作,这种方式是用nodejs来启动。

    cnpm run dev 

    参考博客如下

    https://blog.csdn.net/traguezw/article/details/54577560

    https://blog.csdn.net/haoxuexiaolang/article/details/79294862

    https://blog.csdn.net/yangxiaodong88/article/details/79930274

  • 相关阅读:
    day02_接口测试流程
    day01_接口测试常识丶HTTP协议
    day03_元素操作丶浏览器操作方法丶鼠标操作
    day05_数组
    day04_运算符
    day03_数据类型丶字符编码丶基本数据类型转换
    day02_注释丶关键字丶标识符丶常量丶变量
    day04_数据序列之字符串
    day03_流程控制语句
    day02_输入数据丶数据类型转换丶运算符
  • 原文地址:https://www.cnblogs.com/edison20161121/p/9125930.html
Copyright © 2020-2023  润新知