#我的VUE框架学习

题记:初识VUE,觉得VUE十分的不错,故决定去深入的了解学习它,工欲善其事,必先利其器,下面是我搭建vue环境的过程!

#一.项目搭建及初始化

1.安装:node.js;去官网下载:https://nodejs.org/en/

2.安装cnp:mnpm install -g cnpm --registry=https://registry.npm.taobao.org

安装后打开cmd控制台,由于npm的源在国外,我们利用国内镜像去使用

3.全局安装webpack:cnpm install webpack -g

细心可以看到不再是npm了,改为cnpm了,这就是国内镜像去下载的,运行vue还需要webpack去在本地服务器上运行

4.安装webpack-cli:cnpm install -g webpack-cli

因为CLI(命令行工具)转移到了包webpack-cli中所以我们还需要去安装一下webpack-cli

5.安装vue-cli:cnpm install -g vue-cli

首先vue-cli 是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板

6.初始化项目:vue init webpack (此处为你的项目名称)

全部弄好了,开始初始化项目了

这里我把项目放在H盘了,执行命令可以看到成功了,(乱码不用管,不影响)并且开始问你:

1、项目名称了。2、项目描述。3、作者。4、是否安装vue-router。5、是否使用ESLint来编写代码。6、是否建立单元测试。7、也是问你是否建立测试。8、问你我们是否应该在项目创建后为您运行“npm install”?(推荐)(npm install安装依赖)。这里笔者都选择了NO。

7.进入项目:cd 你的项目名称,去安装依赖。

8.安装依赖:cnpm install

6.启动项目:npm run dev

安装完依赖后就可以使用命令跑起来了,注意默认是8080端口

以上就是我的vue脚手架搭建了,希望能给大家带来帮助,如有用词不妥欢迎指出,谢谢!

VUE框架学习——脚手架的搭建的更多相关文章

  1. vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

    第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...

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

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

  3. vue框架(二)_vue环境搭建及创建项目

    1.node.js:概念介绍及安装 node.js:是一个基于chrome浏览器的v8引擎,可以运行javascript的环境(平台) 特性:异步IO模型 npm:是一个包管理器(工具),可以按装依赖 ...

  4. vue框架学习笔记(vue入门篇)

    vue框架 - 构建用户界面的渐进式框架 - 采用自底层向上增量开发的设计 - 核心库只关注视图层 - 当与单文件组件和vue生态系统支持的库结合使用时,也完全能够为复杂的单页应用程序提供驱动 - v ...

  5. Vue基础及脚手架环境搭建

    From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...

  6. Vue.js学习笔记--菜鸟搭建一个企业级vue的项目

    vue.js新手搭建一个企业项目,从0开始 前置条件: node.npm请先安装配置好 下面开始: npm 下载vue-cli脚手架工具  确认安装成功看到版本号: 初始化项目,选用webpack(p ...

  7. vue环境配置脚手架环境搭建vue工程目录

    首先在初始化一个vue项目之前,我们需要下载node.js,并且安装! 下载地址: nodejs.cn/download 安装完成之后,windows+r 运行命令 cmd  输入node -v  检 ...

  8. vue框架之脚手架(vue-cli)的使用

    前期准备 1.在使用之前需要安装node.js,https://nodejs.org/dist/latest-v8.x/ 2.下载之后在cmd中测试 node -v npm -v 如图上即可 3.下载 ...

  9. vue框架-学习记录

    前段时间在做vue项目时,遇到挺多问题,想简单总结一下: 1.关于父组件,子组件的通信 网上有很多这方面的讲解,讲解也比较细致,我主要总结了自己在项目中需要的: [1]父组件-子组件 也就是" ...

随机推荐

  1. C#各个版本中的新增特性详解【转】

    序言 自从2000年初期发布以来,c#编程语言不断的得到改进,使我们能够更加清晰的编写代码,也更加容易维护我们的代码,增强的功能已经从1.0搞到啦7.0甚至7.1,每一次改过都伴随着.NET Fram ...

  2. POJ 3255 Roadblocks (Dijkstra求最短路径的变形)(Dijkstra求次短路径)

    Roadblocks Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 16425   Accepted: 5797 Descr ...

  3. rman备份简介

    登陆rman: [oracle@oracle ~]$ rman target / connected to target database: FSDB (DBID=1179347208) 执行全备: ...

  4. SpringCloud学习笔记(3)----Spring Cloud Netflix之深入理解Eureka

    1. Eureka服务端的启动过程 1.1  入口类EurekaServerInitializerConfiguration类, public void start() { (new Thread(n ...

  5. li自定义图标

    /*自定义list的图标*/ li{ list-style-image: url(../img/21.JPG); }

  6. 6、DRN-----深度强化学习在新闻推荐上的应用

    1.摘要: 提出了一种新的深度强化学习框架的新闻推荐.由于新闻特征和用户喜好的动态特性,在线个性化新闻推荐是一个极具挑战性的问题. 虽然已经提出了一些在线推荐模型来解决新闻推荐的动态特性,但是这些方法 ...

  7. 'Upgrade' header is missing

    spring-websocket 握手失败是因为 有拦截器  注释掉拦截器就OK

  8. (52)KeyError错误

    当出现:22KeyError: 'xxxxxx'这样的错误,可以肯定依赖出问题了,一般是你引用某个字段,但没有定义,又没有指定依赖的模块,最后找不到对应字段 解决方法:开发工具,把 xxxxxx 去搜 ...

  9. [luogu] P4514 上帝造题的七分钟 (树状数组,二维差分)

    P4514 上帝造题的七分钟 题目背景 裸体就意味着身体. 题目描述 "第一分钟,X说,要有矩阵,于是便有了一个里面写满了0的n×m矩阵. 第二分钟,L说,要能修改,于是便有了将左上角为(a ...

  10. HDU 4069 数独

    好久没做题了,建图搞了好久…… 然后,判是否有多解的时候会把原来的答案覆盖掉…… 这里没注意,弄了一下午…… 代码: #include <iostream> #include <cs ...