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的更多相关文章

  1. Vue脚手架(CLI)第一天

    vue 1.脚手架的搭建(CLI) 1.1.下载nodejs,在官网, [nodejs官网地址][ https://nodejs.org/en/ ] 无脑下一步就可以了.环境自动安装 1.2.下载脚手 ...

  2. 运行vue项目--安装vue脚手架vue cli

    第一步. 安装node: 官网下载node的.pkg,下载地址,选择相应版本进行下载 mac终端下输入npm -v 和 node -v, 出现相应版本号即安装成功. 若均提示 command not ...

  3. 08 . Vue脚手架安装,使用,自定义配置和Element-UI导入使用

    Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构. 安装3.x版本的Vue脚手架 /* npm install -g @vue/cli@3.3 */ 基于3.3版本的脚手架命令创建Vue项目 ...

  4. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  5. [vue三部曲]第一部:vue脚手架的搭建和目录资源介绍,超详细!

    第一步 node环境安装 1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装1.2 如果本机已经安装node的运行换,请更新至最新的node 版本下载地址:https://nod ...

  6. vue脚手架搭建流程

    搭建vue项目之前你需要安装vue的脚手架和node.js,一起去看看怎么搭建一个vue环境吧.(学编程语言最爱看见的就是用这个先写一个helloworld,只想说我对世界友好可是现实是残酷的.... ...

  7. vue 脚手架搭建新项目以及element-ui等vue组件的使用

    vue快速搭建项目(前提是你的电脑已经安装了node的环境和vue脚手架安装,不会的自行百度) 1:打开终端: 这里说下此时位置是在User下的lijuntao文件夹下面,我一般会在桌面新建一个文件夹 ...

  8. 使用vue脚手架(vue-cli)快速搭建项目

    一.从最简单的环境搭建开始: 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装).安装完成之后,打开命令行工具(win+r,然后输入cmd ...

  9. Vue脚手架搭建步骤

    Vue脚手架的搭建步骤 1.   去node.js官网下载node.js并安装,如下图: 2.   找到下载的文件并点击安装: 一直到finish完成.安装成功 3.   通过DOS密令打开: 输入: ...

随机推荐

  1. HTML&javaSkcript&CSS&jQuery&ajax(11)

    1.localStorage 没有 时间的限制数据存储, sessionStorage 针对一个session的存储,首先检查浏览器是否支持对这两个的存储, ifI(type(Storage)!==& ...

  2. stylus入门教程,在webstorm中配置stylus

    转载:https://www.cnblogs.com/wenqiangit/p/9717715.html#undefined   stylus特点 富于表现力.具有健壮性.功能丰富.动态编码 不需要写 ...

  3. python字典操作用法总结

    基本语法: dict = {'ob1':'computer', 'ob2':'mouse', 'ob3':'printer'} 技巧: 字典中包含列表:dict={'yangrong':['23',' ...

  4. Ubuntu 更改屏幕分辨率

    安装完Ubuntu后发现分辨率不合适,平时习惯了看小一点的文字,所以搜了一下修改屏幕分辨率的命令,具体操作如下: 1.先用 xrandr 命令查看一下当前系统支持的分辨率 wayde@wayde-Al ...

  5. openstack 网络更改版

    Openstack环境部署 (参考文献:http://www.cnblogs.com/kevingrace/p/5707003.html 和 https://docs.openstack.org/mi ...

  6. 20165323 实验一 Java开发环境的熟悉

    一.实验报告封面 课程:Java程序设计 班级:1653班 姓名:杨金川 学号:20165323 指导教师:娄嘉鹏 实验日期:2018年4月2日 实验时间:13:45 - 15:25 实验序号:一 实 ...

  7. Vuex详解笔记2

    关于 state 每个vuex 应用只有一个 store 实例,所以使用起来不会太复杂,对于定位错误状态和操作会很方便. 简单用法:在vuex 的计算属性中返回vuex 的状态 最基本的使用方式,通过 ...

  8. ExceptionLess的webAPI调用

    引用 <package id="bootstrap" version="3.0.0" targetFramework="net461" ...

  9. IsNullOrEmpty和IsNullOrWhiteSpace的区别

    IsNullOrEmpty // string /// <summary>Indicates whether the specified string is null or an < ...

  10. Python自带IDE设置字体

    打开Python 3.7.0 shell 点击菜单项 “”Options“”>"Configure IDLE" 可选择窗口的字体和大小 可选择背景主题颜色 可自定义配置