• windows下vue开发环境的搭建


    一 介绍:

      vue.js是什么?

      Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

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

      Vue.js是一个MVVM模式的框架,如果读者有angular经验,一定能够很快入门Vue的

      vue.js的特点:

      易用: 已经会了HTML,CSS,Javascript?即刻阅读指南即可开始构建应用!

      灵活: 简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。

      高效: 16kb min+gzip 的运行大小,超快虚拟 DOM ,最省心的优化

    二 开发环境的搭建:

      vue推荐开发环境:

      Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言

      npm: Nodejs下的包管理器。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像(http://npm.taobao.org/

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

      webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。

      vue-cli: 用户生成Vue工程模板

    按照下面的步骤来即可:

      1:安装node.js

       从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。安装完成之后,打开命令行工具,输入node -v,如下图,如果出现相应的版本号,则说明安装成功。

      

      npm包管理器,是集成在node中的,所以,直接输入npm -v就会如下图所示,显示出npm的版本信息。

      

      oK!node环境已经安装完成,npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm。

      2:cnpm 安装

        在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org然后等待,安装完成如下图。

        

      完成之后,我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的,查看淘宝npm镜像官网

      3:安装vue-cli脚手架构建工具

       vue-cli是vue官方提供的一个命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
    安装命令为:cnpm install -g vue-cli,回车,等待安装。

      

    安装完后,检查是否安装成功,输入vue,出现以下提示表示安装成功。

      

      通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。

      4:用vue-cli构建项目

      要创建项目,首先我们要选定目录,然后再命令行中把目录转到选定的目录。在这里,我选择桌面来存放新建的项目,则我们需要先把目录cd到桌面,如下图。

      cd到此文件夹 表示到那个目录里面                下图表示在桌面

      

      5:试试新建一个Vue项目

      (1)新建一个项目文件夹,命名为 vue-demo,cd到此文件夹,输入:vue init webpack vue-demo,回车,按照如下操作进行初始化:

        输入:vue init webpack vue-demo 这一步表示初始化一个vue项目 名字叫vue-demo

        运行初始化命令的时候回让用户输入几个基本的选项,如项目名称,描述,作者等信息,如果不想填直接回车默认就好。

      (2) 项目目录:

        

      这就是整个项目的目录结构,其中,我们主要在src目录中做修改。这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装,如下图。 

         

      (3)安装项目所需的依赖

        cd到vue-demo 文件夹,执行cnmp install,安装依赖包,安装完成之后,项目目录下多了node_modules

        输入 cd vue-demo 回车

        输入 cnmp install 回车

        

      安装完依赖包之后,就可以运行整个项目了

        在命令行里输入 cnpm run dev,执行完成后启动项目,浏览器出现以下接结果,说明启动成功。注意浏览器的版本,低版本的不支持

      这里简单介绍下npm run dev命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是node build/dev-server.js命令的一个快捷方式。

      项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下所示的界面。

        

    ok!!!!!  end here!!!

    参考文献:http://www.jb51.net/article/108763.htm

      

  • 相关阅读:
    WPF DelegateCommand 出现Specified cast is not valid
    WPF DelegateCommand 出现Specified cast is not valid
    WPF DelegateCommand 出现Specified cast is not valid
    win10 sdk 是否向下兼容
    win10 sdk 是否向下兼容
    win10 sdk 是否向下兼容
    PHP extract() 函数
    PHP end() 函数
    PHP each() 函数
    PHP current() 函数
  • 原文地址:https://www.cnblogs.com/lijuntao/p/6735065.html
Copyright © 2020-2023  润新知