VUE框架学习——脚手架的搭建
#我的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框架学习——脚手架的搭建的更多相关文章
- vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)
第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...
- Vue框架简介和环境搭建
前言: 此篇随笔为个人学习前端框架Vue,js的技术笔记,主要记录一些自己在学习Vue框架的心得体会和技术总结,作为回顾和笔记使用. 这种写博客的方式,对刚开始学习Vue框架的我,也是一种激励,我相信 ...
- vue框架(二)_vue环境搭建及创建项目
1.node.js:概念介绍及安装 node.js:是一个基于chrome浏览器的v8引擎,可以运行javascript的环境(平台) 特性:异步IO模型 npm:是一个包管理器(工具),可以按装依赖 ...
- vue框架学习笔记(vue入门篇)
vue框架 - 构建用户界面的渐进式框架 - 采用自底层向上增量开发的设计 - 核心库只关注视图层 - 当与单文件组件和vue生态系统支持的库结合使用时,也完全能够为复杂的单页应用程序提供驱动 - v ...
- Vue基础及脚手架环境搭建
From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...
- Vue.js学习笔记--菜鸟搭建一个企业级vue的项目
vue.js新手搭建一个企业项目,从0开始 前置条件: node.npm请先安装配置好 下面开始: npm 下载vue-cli脚手架工具 确认安装成功看到版本号: 初始化项目,选用webpack(p ...
- vue环境配置脚手架环境搭建vue工程目录
首先在初始化一个vue项目之前,我们需要下载node.js,并且安装! 下载地址: nodejs.cn/download 安装完成之后,windows+r 运行命令 cmd 输入node -v 检 ...
- vue框架之脚手架(vue-cli)的使用
前期准备 1.在使用之前需要安装node.js,https://nodejs.org/dist/latest-v8.x/ 2.下载之后在cmd中测试 node -v npm -v 如图上即可 3.下载 ...
- vue框架-学习记录
前段时间在做vue项目时,遇到挺多问题,想简单总结一下: 1.关于父组件,子组件的通信 网上有很多这方面的讲解,讲解也比较细致,我主要总结了自己在项目中需要的: [1]父组件-子组件 也就是" ...
随机推荐
- 20.boost dijkstra最短路径算法
到某个点的最短距离 到终点的最短路径 完整代码 #include <iostream> #include <string> #include &l ...
- Ubuntu下gcc安装
在Ubuntu下安装GCC和其他一些Linux系统有点不一样. 方法一: 该方法超简单:sudo apt-get build-depgcc 就上面这条命令就可以搞定 方法二:sudo apt-get ...
- (转载)自定义View——弹性滑动
滑动是Android开发中非常重要的UI效果,几乎所有应用都包含了滑动效果,而本文将对滑动的使用以及原理进行介绍. 一.scrollTo与ScrollBy View提供了专门的方法用于实现滑动效果,分 ...
- 一个PHPer如何深入学习ES搜索引擎?
公司早在一年前就上ES作为后端搜索服务的项目 ,我们PHPer只是负责实现业务接口,es的一些查询,优化技巧由另一组同事(JAVAer)负责,有时,一个需求过来,改动较大时,需要更改查询json语句, ...
- Eclipse使用struts2开发web应用快速搭建
eclipse 下载javaEE版,这里用4.5(Mars). Tomcat8解压,设置好JAVA_HOME环境变量. 下载struts2官网上的lib包,struts-2.3.24-lib.zip, ...
- swift语言点评十-Value and Reference Types
结论:value是拷贝,Reference是引用 Value and Reference Types Types in Swift fall into one of two categories: f ...
- 每个IT安全专业人员应该知道的12种根本漏洞
每个IT安全专业人员应该知道的12种根本漏洞 每年,IT安全专业人员都面临着数千个新的软件漏洞和数百万个不同的恶意软件程序,但只有12种根本漏洞会让这些软件漏洞和恶意软件程序攻击你的设备.了解这些根本 ...
- 如何使用外部插件picker
近日有需求做一个职业选择弹框,在网上搜了半天也没合适的: 暴躁大佬协助我DIY一个插件,直接使用,顺滑流畅,随心所欲!特别鸣谢@一样菜 不多BB了,直接撸代码: 引用写在上面: /* 更改职业 */ ...
- axios使用方法
npm install axios 创建文件夹api/index.js import axios from 'axios'; let http = axios.create({ baseURL: '' ...
- luoguP1555 尴尬的数字(暴力+map)
题意 题解 枚举每一个可能的二进制数.扔到一个map里 再枚举每一个可能的三进制数看map有没有就行了 反正就是很水 #include<iostream> #include<cstr ...