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. Mac下的unity兼容问题,打开项目提示错误:!GetPersistentManager().IsStreamLoaded(assetPath)

    安装unity成功之后,打开unity提示如下 那么打开的unity项目很有可能出现找不到资源的错误. 在检查一下你的Mac宗卷格式,如果是APFS格式的话,基本都会不兼容低版本的32位unity应用 ...

  2. springboo+nginx测试反向代理02

    本节对nginx配置方面会略微研究~~ 1:切换到 /opt/nginx-1.8.1/conf 目录,将nginx.conf文件拷贝到 /myprojects/nginx 目录下 2:切换到/opt/ ...

  3. 解决python查询报%d format: a number is required, not str问题

    文章链接:https://blog.csdn.net/u011878172/article/details/72599120 [问题描述] 1.在一条查询语句中,查询条件既包含了整形又包含了字符串型, ...

  4. shutil&shelve

    https://www.cnblogs.com/xiangsikai/p/7787101.html http://www.cnblogs.com/wupeiqi/articles/4963027.ht ...

  5. 小米平板4 Plus获取Root超级权限的步骤

    小米平板4 Plus有么好方法开启Root权限?大家都清楚,Android机器有Root权限,一旦手机开启root相关权限,就可以实现更强大的功能,打比方大家部门的营销部门的同事,使用个别营销应用都需 ...

  6. vertx.FileResolver文件解析

    FileResolver Class //文件复制解析,复制文件到cache directory 中 ,VM options : -Dvertx.disableFileCPResolving publ ...

  7. java类型转化

    Java中的父类/子类相互转化问题: 子类可以转成父类:此时子类能调用父类中定义的方法和变量,如果子类中重写了父类中的一个方法,那么在调用这个方法的时候,将会调用子类中的这个方法 父类转成子类:1.如 ...

  8. RPA 介绍

    一 术语表 机器人流程自动化(RPA):在数字系统中模拟和集成人类行为以优化业务流程的软件机器人.RPA自动化捕获数据.运行应用程序.触发响应并与其他系统通信以执行各种任务. RPA路线图(RPA r ...

  9. 关于8.0.15版本的mysql下载与安装

    下载MYSQL 官网下载MYSQL8.0.15版本,链接地址https://www.mysql.com/downloads/,流程如下 点击进入后,网页滑到最下面,根据自己电脑的型号下载相应的版本 安 ...

  10. 方法总结:如何实现html页面自动刷新

    使用场景: 1. 页面需要定时刷新,实时加载数据,需要实时查看监控数据(H5中的WebSocket和SSE可以实现局部刷新) 2. 一定时间之后跳转到指定页面(登录注册之类) 3. 前端开发使用伪数据 ...