搭建vue脚手架---vue-cli
vue-cli作为一款mvvm框架语言(vue)的脚手架,集成了webpack环境及主要依赖,对于项目的搭建、打包、维护管理等都非常方便快捷。我们在开发项目时尤其需要这样一个快速构建项目的工具。
以下是使用vue脚手架,vue-cli搭建开发环境,进行项目的基础代码结构搭建,做一些项目初始化的工作。
一:准备环境和工具
1.安装node.js,安装完成后输入node -v进行查看 ,安装完成后是自带npm(包管理工具),但是npm从国外的服务器下载,安装依赖会很慢,所以用可以换成cnpm来安装依赖
2.安装淘宝镜像,打开命令行,npm install -g cnpm --registry= https://registry.npm.taobao.org ,输入cnpm -v查看
3.安装webpack,输入 npm install webpack -g ,输入webpack -v
4.安装vue-cli脚手架构建工具,输入npm install vue-cli -g,输入vue-V
二:用vue-cli构建项目
1.指定相关目录
2.安装vue脚手架,vue init webpack 名称
3.cd 名称
4.安装项目依赖:npm install ,安装构建过程中已经存在package.json文件进行依赖的安装。首先是npm install,若时间过长,则换成cnpm install 进行安装
5.安装vue-router和网络请求模块vue-resource,输入cnpm install vue-router vue-resource --save
6.启动项目,输入npm run dev ,默认启动的端口号是8080
安装完成后可以看到文件结构如下:


搭建vue脚手架---vue-cli的更多相关文章
- Vue脚手架(CLI)第一天
vue 1.脚手架的搭建(CLI) 1.1.下载nodejs,在官网, [nodejs官网地址][ https://nodejs.org/en/ ] 无脑下一步就可以了.环境自动安装 1.2.下载脚手 ...
- 运行vue项目--安装vue脚手架vue cli
第一步. 安装node: 官网下载node的.pkg,下载地址,选择相应版本进行下载 mac终端下输入npm -v 和 node -v, 出现相应版本号即安装成功. 若均提示 command not ...
- 08 . Vue脚手架安装,使用,自定义配置和Element-UI导入使用
Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构. 安装3.x版本的Vue脚手架 /* npm install -g @vue/cli@3.3 */ 基于3.3版本的脚手架命令创建Vue项目 ...
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...
- [vue三部曲]第一部:vue脚手架的搭建和目录资源介绍,超详细!
第一步 node环境安装 1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装1.2 如果本机已经安装node的运行换,请更新至最新的node 版本下载地址:https://nod ...
- vue脚手架搭建流程
搭建vue项目之前你需要安装vue的脚手架和node.js,一起去看看怎么搭建一个vue环境吧.(学编程语言最爱看见的就是用这个先写一个helloworld,只想说我对世界友好可是现实是残酷的.... ...
- vue 脚手架搭建新项目以及element-ui等vue组件的使用
vue快速搭建项目(前提是你的电脑已经安装了node的环境和vue脚手架安装,不会的自行百度) 1:打开终端: 这里说下此时位置是在User下的lijuntao文件夹下面,我一般会在桌面新建一个文件夹 ...
- 使用vue脚手架(vue-cli)快速搭建项目
一.从最简单的环境搭建开始: 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装).安装完成之后,打开命令行工具(win+r,然后输入cmd ...
- Vue脚手架搭建步骤
Vue脚手架的搭建步骤 1. 去node.js官网下载node.js并安装,如下图: 2. 找到下载的文件并点击安装: 一直到finish完成.安装成功 3. 通过DOS密令打开: 输入: ...
随机推荐
- java URI
URI是对URL的抽象,不仅包括统一资源定位符,还包括统一资源名,在java中URI用java.net.URI类表示,这个类与java.net.URL类的区别表现在: URI类完全有关于资源的标识和U ...
- ajax之阴影效果实现(对象函数方法)
shadow.js文件内容jQuery.fn.shadow = function () { //获取到每个已封装的元素 //this表示jQuery对象 this.each(function () { ...
- docker文件复制到centos/linux/ubantun环境下
1.有些时候我们需要将容器里面的文件,弄到系统里面来分析,像报错log等 格式:docker cp 容器名:文件在容器里面的路径 要拷贝到宿主机的对应路径 2.有些情况下,我们需要将文 ...
- 史上最简单的SpringCloud教程 | 第四篇:断路器(Hystrix)
在微服务架构中,根据业务来拆分成一个个的服务,服务与服务之间可以相互调用(RPC),在Spring Cloud可以用RestTemplate+Ribbon和Feign来调用.为了保证其高可用,单个服务 ...
- logstash配置白名单决定去哪个index
input { kafka { bootstrap_servers => "127.0.0.1:9092" client_id => "log" a ...
- 报错ERR_CONNECTION_REFUSED,如何解决(原创)
当我访问我的一个后天地址的时候,突然出现了ERR_CONNECTION_REFUSED,但是之前是可以访问的. 我先ping了下这个网址,发现是OK的 然后我想可能是80端口有问题,也就是说可能是WE ...
- DevExpress中的GridControl控件设置了列Readonly后,想双击弹出明细的实现
OptionsBehavior.Editable = true时,会有二个对象触发事件:view触发ShownEditor 事件(第一单击时)和内置编辑器的DoubleClick事件所以必须处理这二个 ...
- [转] ReactJS之JSX语法
JSX 语法的本质目的是为了使用基于 xml 的方式表达组件的嵌套,保持和 HTML 一致的结构,语法上除了在描述组件上比较特别以外,其它和普通的 Javascript 没有区别. 并且最终所有的 J ...
- grails服务端口冲突解决办法-【grails】
grails中默认的服务端口为,当本机中需要同时启动两个不同的项目时,就会造成端口冲突,比如启动第二个服务时就会报如下的错误: Server failed to start for port 8080 ...
- Python_collections_OrderedDict有序字典部分功能介绍
OrderedDict():实现字典的固定排序,是字典的子类 import collections dic = collections.OrderedDict() dic['k1'] = 3 dic[ ...