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

首先vue.js的作者是中国人,所以说他是国产的,吸收了google的angular.js和facebook的react.js的特性,摒弃了jquery传统的DOM操作,采用数据绑定和指令等概念,可以说是未来WEB端开发的趋势,但是也并不代表jquey就淘汰了,存在即合理,jq应该在以后会有其他领域的价值,这里我就不多说了。

1:安装nodejs

http://nodejs.cn/进去该网站下载最新版本的node,

2:配置环境变量(angularjs+ionic)是一样的,这里就不啰嗦了。有兴趣的同鞋可以自己去搞。

NODE_PATH:node安装路径

PATH = %NODE_PATH%\;%NODE_PATH%\node_modules;%NODE_PATH%\node_global;

3:安装全局vue-cli脚手架、webpack.

(npm)cnpm install -g vue-cli                       //全局安装vue-cli

(npm)cnpm install -g webpack                          //全局安装webpack

(npm)npm install -g webpack-dev-server             //安装webpack的本地webserver

 安装完成后,vue-cli脚手架其实就已经把vue也装掉了,所以只需输入vue -V 和 webpack -v  等等就可以查看安装成功与否。

4:创建项目和填写项目信息

vue init webpack hotDog

看到上面的就代表已经完成,然后就去当前的磁盘里找到“my_test”你的项目文件夹,里面使用了脚手架vue-cli的和webpack提供的模板进行了创建。目录结构大概是这样

5:本地安装和运行项目

注意前面的盘符是当前的,然后命令cd hotDog    //进入创建的项目文件夹。回车输入  cnpm install   你会发现在已经创建的项目结构里面会多出一个node_modules的文件夹,里面就是刚才安装的所有依赖。

准备工作做好以后,测试一下项目里面默认的app.vue模块能否跑起来,这是需要先安装一下服务器环境,在命令行中输入 cnpm run dev 回车即可

6:运行别人的vue.js项目domo

可以从github上克隆下来,然后将项目文件夹放到某个盘符下,然后cmd命令 找到该盘符,比如 f:

f:\cd domo_vue

命令 cnpm(npm) install    //在本地安装

最后  cnpm(npm) run dev   回车   //在本地的浏览器打开127.0.0.1带上端口号就可以跑起来了。

7:服务器端运行

npm run build

会生成静态文件,在根目录的dist里,里面有个index.html,这是服务器访问的路径指定到这里就可以访问我们自己的项目了。但是我发现个问题就是生成index.html里引用的css和js的引用路径不对,这时候就需要自己修改一下配置了。

进入config/index.js

最简单的开发环境和项目搭建就说到这里,后面继续!

vue开发(开发环境+项目搭建)的更多相关文章

  1. php开发扩展环境的搭建(Windows)

    php开发扩展环境的搭建(Windows) 前期准备: (1) 下载php-5.3.10源码包(php-5.3.10.tar.bz2)并解压到C:\php-5.3.10:下载二进制包php-5.3.1 ...

  2. vue学习(1) vue-cli 项目搭建

    vue学习(1)  vue-cli 项目搭建 一.windows环境 1. 下载node.js安装包 官网:https://nodejs.org/en/download/ 选择LTS下载 2. 安装 ...

  3. 2015 - 4- 21 iOS开发越狱环境的搭建1

    2015 - 4- 20   1. 越狱环境的搭建   http://www.iduuke.com/2030.html http://www.cnblogs.com/xiongwj0910/archi ...

  4. vue2.0 项目搭建 和vue 2.0 electron 项目搭建

    1.关于electron vue 项目的搭建 全局或者局部安装项目vue: 脚手架指令生成: npm install -g vue-cli vue init simulatedgreg/electro ...

  5. vue 3.0 vue-cli项目搭建要点

    一.使用vue-cli搭建项目(可使用vue ui图形化界面搭建项目,配置dist时,将名称设为项目名称) 二.项目搭建后 1.配置vue.config.js // 翻阅文档https://cli.v ...

  6. 关于 vue.js 运行环境的搭建(mac)

    由于本人使用的是mac系统,因此在vue.js 的环境搭建上遇到许许多多的坑.感谢 showonne.yubang 技术指导,最终成功解决.下面是个人的搭建过程,权当是做个笔记吧. 由于mac非常人性 ...

  7. vue2.0:(一)、vue的安装和项目搭建(以外卖app项目举例)

    vue系列踩坑大作战由此就要开始了,准备好了吗,和我一起踩坑,学会vue吧.同时,也欢迎大家把自己遇到的坑发出来,让更多的人学会vue,因为我深知前端学习新框架不容易,尤其是我这种半路出家的女前端.不 ...

  8. vue+express+mysql +node项目搭建

    项目搭建前需要先安装node环境及mysql数据库. 1.利用vue-cli脚手架创建一个vue项目 a.全局安装 npm install -g vue-cli b.初始化项目 vue init we ...

  9. Vue.js系列之项目搭建

    项目搭建具体步骤如下: 1.安装node (中)https://nodejs.org/zh-cn/ (英)https://nodejs.org/en/ 2.安装cnpm镜像 (node自带安装了npm ...

随机推荐

  1. git命令之git mergetool vi非正常退出.swp删除不了的问题

    1.git   pull命令产生无法merge的错误 使用了 git  mergetool命令然后...傻逼了 进入了vi操作界面,不会操作,非正常退出... 然后就产生了.swp相关文件,死活删除不 ...

  2. SQL server 数据库中插入中文变???格式乱码的问题另一种容易忽略的情况(C#操作dapper)

    1.先查查 VS2015 中的XXX.cs页面中编码格式,记事本打开另存一下,编码格式可能是ANSI改为unioncode. (中文前面加N或者改排序规则解决不了的情况有可能是以上原因.)

  3. day09 详解内存管理机制

    """ 今日内容:详解内存管理 1.引用计数 在内存中为了对变量的值进行标记从而方便管理,采用引用计数的方式对变量进行标记. (1)如果变量的值被引用一次,那么该变量的引 ...

  4. mybatis调用oracle存储过程的几个参考例子

    首先写一个存储过程: create or replace procedure p_syn_equipment_20161205 is sqlstr ); begin --清空表 sqlstr := ' ...

  5. ubuntu常用命令及操作,包括安装CUDA

    chmod Document 这里Document是一个文件夹,文件夹中还有好多子文件,可以发现执行了这条指令以后,其子文件夹的权限并没有改变. 要想改变其子文件夹的权限,应该执行 Document/ ...

  6. 帆软报表(finereport)间格运算常用公式

    1.1在C3(占比)单元格中直接使用占比公式:=PROPORTION(B3):占比:当前值占总值的比例 1.2 计组内占比注:C2[!0]{A2=$A2},表示C2扩展出来地区相同的单元格.sum(C ...

  7. 《Linux就该这么学》 - 必读的红帽系统与红帽linux认证自学手册

    <Linux就该这么学>   本书作者刘遄从事于linux运维技术行业,较早时因兴趣的驱使接触到了Linux系统并开始学习. 已在2012年考下红帽工程师RHCE_6,今年又分别考下RHC ...

  8. P4098 [HEOI2013]ALO

    最近这个家伙去哪了,为啥一直不更博客了呢?原来他被老师逼迫去补了一周的文化课,以至于不会把班里的平均分拉掉太多.好了,我们来看下面这道题目: P4098 [HEOI2013]ALO 题目描述 Welc ...

  9. C# 获取版本号

    Text = Text + " [V." + Assembly.GetExecutingAssembly().GetName().Version + "]";

  10. 《ServerSuperIO Designer IDE使用教程》- 6.增加与阿里云物联网(IOT)对接服务,实现数据交互。发布:v4.2.4 版本

    v4.2.4 更新内容:1.增加了对接阿里物联网平台的服务.下载地址:官方下载   6. 增加与阿里云物联网(IOT)对接服务,实现数据交互  6.1    概述 为了满足业务系统数据上云的要求,Se ...