基于Vue-cli 快速搭建项目
Vue-cli可以快速帮助我们创建一个项目,这是官方给我们提供的脚手架。下面我说一下vue-cli的使用方法。
一、准备工作
在使用vue-cli时,首先需要安装nodejs,npm,其次需全局安装vue和vue-cli
1、nodejs和npm安装方法详见https://www.cnblogs.com/le220/p/8670349.html
2、npm install -g vue
3、npm install -g vue-cli
二、vue-cli快速搭建项目
安装完成后,同时在C:\Users\Andminster\AppData\Roaming\npm目录下为会生成几个文件。
三、配置环境变量
Vue不是内部或外部命令问题解决
表示系统没有找到vue.cmd的地址,需要将vue.cmd的地址添加到系统环境变量的path中。
可以全局搜索,vue.cmd
右键选择“打开文件所在目录”,将该目录添加至系统环境变量path中:
电脑——属性——高级系统设置
四、安装完成后,创建自己的工作空间,在cmd切换至刚刚创建好的工作空间,如果已经有工作空间,直接切换到工作空间即可。
使用命令创建项目
vue init webpack test
test是项目名称,这个名字自己随便取。
命令输入后,会进入安装阶段,需要用户输入一些信息
1、Project name (vuetest) 项目名称,可以自己指定,也可直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters)。
2、Project description (A Vue.js project) 项目描述,也可直接点击回车,使用默认名字
接下来会让用户选择
3、接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设,编写vue项目时的代码风格,因为我选择了使用ESLint
4、Standard (https://github.com/feross/standard) 标准
5、AirBNB (https://github.com/airbnb/javascript) JavaScript最合理的方法,这个github地址说的是JavaScript最合理的方法
6、none (configure it yourself) 这个不用说,自己定义风格
具体选择哪个因人而异吧 ,我选择标准风格
7、Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试,我选择安装
8、Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ,我选择安装
9、完成
五、运行项目
在项目文件夹下执行npm install(安装依赖包),npm run dev(运行项目)。
在运行项目中如果遇到端口被占用,找到bulid文件夹下的webpack-dev-server.js修改port即可。
基于Vue-cli 快速搭建项目的更多相关文章
- 基于@vue/cli 的构建项目(3.0)
1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...
- vue-cli webpack 快速搭建项目
一.安装vue npm install vue -g 二.用vue-cli快速搭建项目 //全局安装vue-cli npm install install -g vue-cli //创建一个基于web ...
- (转载) android快速搭建项目积累
android快速搭建项目积累 2016-04-05 20:07 519人阅读 评论(0) 收藏 举报 分类: android优化(8) Rx技术(5) 版权声明:本文为博主原创文章,未经博主 ...
- VUE CLI环境搭建文档
VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代 ...
- 基于renren-fast的快速入门项目实战(实现报表增删改查)
基于renren-fast的快速入门项目实战(实现报表增删改查) 说明:renren-fast是一个开源的基于springboot的前后端分离手脚架,当前版本是3.0 官方开发文档需付费,对于新手而言 ...
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
- vue cli3.0快速搭建项目详解(强烈推荐)
这篇文章主要介绍下vue-cli3.0项目搭建,项目结构和配置等整理一下,分享给大家. 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cl ...
- 使用vue-cli(vue脚手架)快速搭建项目
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目.这篇文章将会从实操的角度,介绍整个搭建的过程. 1. 避坑前言 其实这次使用vue-cli的 ...
- vue cli4.0 快速搭建项目详解
搭建项目之前,请确认好你自己已经安装过node, npm, vue cli.没安装的可以参考下面的链接安装. 如何安装node? 安装好node默认已经安装好npm了,所以不用单独安装了. 如何安装v ...
随机推荐
- selenium自动化环境搭建(Windows)
参考内容:虫师<selenium2自动化测试实战-基于python语言> 一.selenium介绍 selenium主要用于web应用程序的自动化测试,还支持所有基于web的管理任务自动化 ...
- CentOS虚拟机如何设置共享文件夹,并在Windows下映射网络驱动器?
一.为什么要这么做? 最近在做Linux下的软件开发,但又想使用Windows下的编程工具“Source Insight”. 亲测有效. 要注意查看smb.conf.example,centos7的 ...
- Swift图书展示项目笔记
1.Swift语言特点 Extensions(扩展):就是向一个已有的类.结构体.枚举类型或者协议类型添加新功能.这包括在没有权限获取原始源代码的情况下扩展类型的能力(即逆向建模) map: 得到一个 ...
- Delphi 10.3 Rio + iOS 12.1 SDK 编译错误 "libcharset.1.dylib"
环境版本: Delphi 10.3 Rio iOS 12.1 SDK Xcode 10.1 (10B61) 错误讯息:[DCC Error] E2597 ld: file not found: /us ...
- 手机app测试讲座
活动简介: 移动 面向人群: 测试工程师,软件工程师,系统运维工程师,项目经理 活动时间 基于C#的移动应用程序测试(1) 2016年5月18日 上午9:00 基于C#的移动应用程序测试(2) 201 ...
- 20155204《网络对抗》Exp9 Web安全基础实践
20155204<网络对抗>Exp9 Web安全基础实践 一.基础问题回答 SQL注入攻击原理,如何防御? 原理: SQL注入即是指web应用程序对用户输入数据的合法性没有判断,攻击者可以 ...
- HTML5 本地存储的用法
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
- 7、mysql高级特性
7.1.分区表 7.1.1 分区表的原理 7.1.2分区表的类型 7.1.3如何使用分区表 7.1.4什么情况下出问题 7.1.5查询优化 使用explain 来分析sql使用的分区表 7.1.6合并 ...
- banner 跟随鼠标呈现视差效果
参考 Element 官网,利用 js / jq 和 css3, 实现某图片随着鼠标移动呈现的视差效果. <!DOCTYPE html> <html> <head> ...
- POJ1094——拓扑排序和它的唯一性
比较模板的topological-sort题,关键在于每个元素都严格存在唯一的大小关系,而一般的拓扑排序只给出一个可能解,这就需要每趟排序的过程中监视它是不是总坚持一条唯一的路径. 算法导论里面的拓扑 ...