欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue之新手使用

程序员文章站 2022-08-08 13:50:18
vue中文网站:https://cn.vuejs.org/v2/guide/installation.html 包含了安装、使用、api、视频。 一. 什么是 Vue Vue 是一个前端框架,特点是 数据绑定 比如你改变一个输入框 Input 标签的值,会自动同步更新到页面上其他绑定该输入框的组件的 ......

vue中文网站:https://cn.vuejs.org/v2/guide/installation.html  包含了安装、使用、api、视频。

一. 什么是 vue

  vue 是一个前端框架,特点是
  数据绑定

比如你改变一个输入框 input 标签的值,会自动同步更新到页面上其他绑定该输入框的组件的值

   组件化

页面上小到一个按钮都可以是一个单独的文件.vue,这些小组件直接可以像乐高积木一样通过互相引用而组装起来

  下载vue.js

开发或学习:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产环境:<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

二. 安装node.js

   1.  下载node.js。

        下载地址:https://nodejs.org/zh-cn/   (或者)  右上角有中文切换。

       我下载了12.13.1长期支持版的。linux 上安装 node.js 需要安装 python 2.6 或 2.7 ,不建议安装 python 3.0 以上版本    

      vue之新手使用

  

    (1)双击运行(run)安装包,等待安装。

      vue之新手使用

     (2)next>接受协议>选择安装路径

      vue之新手使用

 

    (3)选择需要的模式

      vue之新手使用

     (4)选择install安装。

        完成之后会弹出命令行窗口

      vue之新手使用

     (5)检测path环境变量是否配置了node.js,“windows+r” 快捷键  输入"cmd" => 输入命令"path",输出如下结果(ctrl+f 在当前页面搜索 通用):  

         path=c:\oraclexe\app\oracle\product\10.2.0\server\bin;c:\windows\system32;
        c:\windows;c:\windows\system32\wbem;c:\windows\system32\windowspowershell\v1.0\;
        c:\python32\python;c:\mingw\bin;c:\program files\gtk2-runtime\lib;
        c:\program files\mysql\mysql server 5.5\bin;c:\program files\nodejs\;
        c:\users\rg\appdata\roaming\npm
        说明安装成功

     (6)检查node.js版本。 npm包管理器是集成在node.js中了,所以在安装node.js的时候就已经自带了npm,输入npm -v可得到npm的版本。

           vue之新手使用

      (7)输入以下命令npm -g install npm,更新npm至最新版本

        查看版本   npm -v  

三. 安装公服-淘宝镜像(cnpm)

      大家都知道国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 npm 镜像。cnpm 命令代替默认的npm命令,增加依赖包加载速度且避免资源限制。 

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

    这样就可以使用 cnpm 命令来安装模块了:

  cnpm install [name] 

    安装webpack

    cnpm install webpack -g

    安装vue脚手架

    npm install vue-cli -g
    (安装失败的解决方法 npm cache clean --force)

 

    会有一些初始化的设置,如下输入:
    target directory exists. continue? (y/n)直接回车默认(然后会下载 vue2.0模板,这里可能需要连代理)
    project name (vue-test)直接回车默认
    project description (a vue.js project) 直接回车默认
    author 写你自己的名字

   安装 vue 路由模块vue-router和网络请求模块vue-resource

    cnpm install vue-router vue-resource --save

   启动项目

    npm run dev