1、node.js:概念介绍及安装

node.js:是一个基于chrome浏览器的v8引擎,可以运行javascript的环境(平台)
特性:异步IO模型
npm:是一个包管理器(工具),可以按装依赖插件
应用场景:聊天、电子商务
优点:高并发且实时的情况下
   性能高
缺点:不适合用于大数据逻辑算法

python服务器、php  ->aphche、java ->tomcat、   iis

-->它是一个可以运行JAVASCRIPTR 的运行环境

-->它可以作为后端语言(websocket \ )

--强大的包管理工具npm,可以使用它安装插件

-->VUE框架是基于node.js平台运行的

--->它是基于chrome浏览器的V8引擎,运行速度快,性能高效

安装淘宝镜像:npm install cnpm -g --registry=https://registry.npm.taobao.org

安装完node.js会默认安装npm包管理工具

2、通过脚手架生成VUE工程

  -->安装脚手架

        npm install vue-cli -g  或者  cnpm install vue-cli -g
  -->创建基于webpack模板的项目wsw   vue init webpack wsw
  -->进入项目并安装依赖   cd myProject   npm install --> 启动项目    npm run dev (或者 npm start)

Vue.js 目录结构

目录解析

目录/文件                        说明
build           最终发布的代码存放位置。
config       配置目录,包括端口号等。我们初学可以使用默认的。
node_modules npm     加载的项目依赖模块
src            这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
assets:          放置一些图片,如logo等。
components:        目录里面放了一个组件文件,可以不用。
App.vue:          项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。
main.js:          项目的核心文件。
static           静态资源目录,如图片、字体等。
test            初始测试目录,可删除
.xxxx文件         这些是一些配置文件,包括语法配置,git配置等。
index.html         首页入口文件,你可以添加一些 meta 信息或同统计代码啥的。
package.json       项目配置文件。
README.md       项目的说明文档,markdown 格式

3、实现单页面思路:

1、在路径:/src/components 创建组件(VUE文件)
2、在/src/router 配置路由
3、在 跟组件 /src/App.vue 组件里编写路径 <router-link to="/home">home</router-link>

4、下载axios 包:

  在项目路径下打开cmd:npm install axios

  引用下载的包:

    1、在跟目录下的packag.json 的  "devDependencies" 添加:"axios": "^0.17.1"

    2、在要引用的组件里: import axios from 'axios'

vue框架(二)_vue环境搭建及创建项目的更多相关文章

  1. Vue(一)环境搭建、创建项目

    1.安装node和npm 因为node已经有npm,所以直接安装node,配置环境变量 官网地址:http://nodejs.cn/download/ 2.查看node是否安装成功,输入名nde -v ...

  2. 从零开始学Xamarin.Forms(二) 环境搭建、创建项目

    原文:从零开始学Xamarin.Forms(二) 环境搭建.创建项目 一.环境搭建 Windows下环境搭建:     1.下载并安装jdk.Android SDK和NDK,当然还需要 VS2013 ...

  3. vue--1.环境搭建及创建项目

    转自https://blog.csdn.net/junshangshui/article/details/80376489 一.环境搭建及创建项目 1.安装node.js,webpack 2.安装vu ...

  4. Vue框架简介和环境搭建

    前言: 此篇随笔为个人学习前端框架Vue,js的技术笔记,主要记录一些自己在学习Vue框架的心得体会和技术总结,作为回顾和笔记使用. 这种写博客的方式,对刚开始学习Vue框架的我,也是一种激励,我相信 ...

  5. VUE环境搭建、创建项目、vue调试工具

    环境搭建 第一步 安装node.js 打开下载链接:   https://nodejs.org/en/download/    这里下载的是node-v6.9.2-x64.msi; 默认式的安装,默认 ...

  6. 从零開始学Xamarin.Forms(二) 环境搭建、创建项目

    一.环境搭建 Windows下环境搭建:     1.下载并安装jdk.Android SDK和NDK.当然还须要 VS2013 update 2(VS2010.VS2012均可)以上. a.  最新 ...

  7. vue环境搭建及创建项目

    安装node环境:node环境下载地址:https://nodejs.org/zh-cn/download/,可根据对应的操作系统版本下载安装 安装完成后查看对应的node和npm版本,如没有出现对应 ...

  8. Ionic01 简单介绍、环境搭建、创建项目、项目结构、创建组件、创建页面、子页面跳转

    1 Ionic 基本介绍 Ionic 是一款基于 Angular.Cordova 的强大的 HTML5 移动应用开发框架 , 可以快速创建一个跨平台的移动应用.可以快速开发移动 App.移动端 WEB ...

  9. 1.RN环境搭建,创建项目,使用夜神模拟调试

    1.环境搭建(Yarn.React Native 的命令行工具(react-native-cli)) npm install -g yarn react-native-cli 具体参考 参见官方(中文 ...

随机推荐

  1. 题目1102:最小面积子矩阵(暴力求解&最大连续子序列)

    题目链接:http://ac.jobdu.com/problem.php?pid=1102 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...

  2. 基本类型算法题目学习(EPI)

    1.关于奇偶校验的方法中,如何快速的求取一个64-bit的数字的奇偶校验位.(如果1的位数为奇数,则奇偶校验位为1,如果1的位数为偶数,则奇偶校验位为0) a.暴力枚举法采用一位一位进行计算,一位一位 ...

  3. Docker关联使用的一些工具:Clip名字服务(转载)

    Clip名字服务 Clip(http://blog.puppeter.com/read.php?7)是一个名字服务C/S架构,它将传统的IP管理维度替换为名字服务即有意义可记忆的String.Clip ...

  4. 解决方案:CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\--”--“拒绝访问。 ”

    IIS部署的网站打开出现问题: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET F ...

  5. Angular打开页面隐藏显示表达式

    1.使用 ng-cloak, 同时要在css加入一行 [ng-cloak] {display: none;} 样式 [ng:cloak], [ng-cloak], [data-ng-cloak], [ ...

  6. vue--引入富文本编辑器

    https://blog.csdn.net/div_ma/article/details/79536634 // 使用 https://blog.csdn.net/div_ma/article/det ...

  7. NLP常用语料集合

    常用语料资源 下面提供一些网上能下载到的中文的好语料,供研究人员学习使用.(1).中科院自动化所的中英文新闻语料库 http://www.datatang.com/data/13484中文新闻分类语料 ...

  8. 希尔排序之python

    希尔排序( Shell sort) 插入排序的改进版本,其核心思想是将原数据集合分割成若干个子序列,然后再对子序列分别进行直接插入排序,使子序列基本有序,最后再对全体记录进行一次直接插入排序. 我的面 ...

  9. Python面向对象:继承和多态

    继承与多态简介: 继承可以把父类的所有功能都直接拿过来,这样就不必重零做起,子类只需要新增自己特有的方法,也可以把父类不适合的方法覆盖重写. 动态语言的鸭子类型特点决定了继承不像静态语言那样是必须的. ...

  10. 6.2.3 Property Access Errors

    JavaScript: The Definitive Guide, Sixth Edition by David Flanagan   Property access expressions do n ...