VUE,基于vue-cli搭建创建vue项目
前提:必须安装node.js,官方地址:https://nodejs.org/en/
然后安装vue-cli 安装方式:cmd命令行安装:打开cmd命令符输入进行全局安装脚手架:npm install -g @vue/cli
全局脚手架安装成功之后就可以创建vue项目了
三种创建方式:这里演示第三种
第一种(旧版本创建项目,不推荐):首先要安装依赖包 npm install -g @vue/cli-init 然后命令行输入: vue init webpack my-project 开始创建项目
第二种(新版本可视化创建项目,推荐):通过命令行输入:vue ui 进行可视化创建
第三种(新版本命令行创建项目):通过命令行输入:vue create my-project 开始创建vue项目
步骤一:选择安装方式:第一种自动安装;第二种手动安装建议手动安装选择自己需要的包。
步骤二:选择需要的包进行安装,空格选择,回车确定。这里选择常用的三个包
步骤三: 提示是否选择历史模式的路由,这里选N,哈希模式
步骤四:选择ESLint版本,这里用常规模式:Standard config
步骤五:语法检查方式,选择第一个:保存就检查
步骤六:选择Babel、ESLint文件存放,是单独存放还是存放在一起,这里选第一个单独存放,单独存放便于后期维护
步骤七:提示是否记录此次配置,记录此次配置再次创建项目时可以引用同样的配置,这里随意
回车等待创建完成
然后测试
首先进入创建的项目:cd my-porject
然后进入项目跑起来~~~ npm run serve
项目成功跑起来之后会有一个哈希地址
复制地址到网页打开,出现下图说明项目成功创建完成!
VUE,基于vue-cli搭建创建vue项目的更多相关文章
- Vue CLI Webpack 创建Vue项目
简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
- 【vue】如何在 Vue-cli 创建的项目中引入 iView
根据vue项目的搭建教程,以下记录如何在Vue-cli创建的项目中引入iView. 1)iView的安装,在项目下使用 npm 安装iView cnpm install iview --save ...
- 【vue】如何在 Vue-cli 创建的项目中引入iView
根据vue项目的搭建教程,一下记录下如何在Vue-cli创建的项目中引入iView. 1)安装iView,在项目下 cnpm install iview --save 2 ) 在 webpack ...
- vue实战记录(二)- vue实现购物车功能之创建vue实例
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(二) GitHub:sue ...
- vue.js(1)--创建vue实例的基本结构
vue实例基本结构与MVVM框架 (1)vue实例基本结构 <!DOCTYPE html> <html lang="en"> <head> &l ...
- vue cli搭建的vue项目 不小心开了eslint 一直报黄色的警告
报错必须处理,警告也忍不了,发现在bulid -webpack.base.config.js 里找到 const createLintingRule = () => ({ /*test: /\. ...
- Vue之vue自动化工具快速搭建单页项目目录
1 生成项目目录 使用vue自动化工具可以快速搭建单页应用项目目录. 该工具为现代化的前端开发工作流提供了开箱即用的构建配置.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构 ...
- 【巷子】---vue基于mint-ui三级联动---【vue】
一.基本配置 https://github.com/modood/Administrative-divisions-of-China 三级联动数据地址 二.vue基本配置 1.cnpm install ...
- 如何创建vue项目
Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...
随机推荐
- 【nodejs原理&源码杂记(8)】Timer模块与基于二叉堆的定时器
[摘要] timers模块部分源码和定时器原理 示例代码托管在:http://www.github.com/dashnowords/blogs 一.概述 Timer模块相关的逻辑较为复杂,不仅包含Ja ...
- SpringBoot整合freemarker模板
一.目录展示 二.导入依赖 三.application.properties配置文件 四.在src/main/resource/templates文件夹中创建HelloFreeMarker.ftl文件 ...
- [NACOS HTTP-GET] The maximum number of tolerable server reconnection errors has been reached
错误的意思是:已达到可容忍的服务器重连接错误的最大数目.有两个解决思路:一个将这个值设置的更大:然后是排查自己连接服务哪儿出了问题.先说在哪儿设置这个值:在拉取nacos服务的注解配置中,添加一个属性 ...
- 添加-ObjC的含义
http://www.cnblogs.com/yashi88/p/3551947.html 参考文章 当使用某个第三方库时,遇到 出现"selector not recognized&quo ...
- 数据库Oracle的含义
数据库的含义: 所谓的数据库其实就是数据的集合.用户可以对集合中的数据进行新增.查询.更新. 删除等操作.数据库是以一定方式储存在一起.能与多个用户共享.具有尽可能小的冗余度. 与应用程序彼此独立的数 ...
- 2018HDU多校五-G题 Glad You Game (线段树)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6356 Glad You Game Steve has an integer array aa of ...
- Spring Security OAuth2 Demo —— 密码模式(Password)
前情回顾 前几节分享了OAuth2的流程与授权码模式和隐式授权模式两种的Demo,我们了解到授权码模式是OAuth2四种模式流程最复杂模式,复杂程度由大至小:授权码模式 > 隐式授权模式 > ...
- Day 03 作业
简述变量的组成 变量名,赋值符号,变量值 简述变量名的命名规范 变量名应该能反映变量值所描述的状态 变量名必须以字母数字下划线组合且不能以数字开头 变量名不能是关键字 简述注释的作用 让后面的代码失效 ...
- mysql中where和having子句的区别和具体用法
1.mysql中的where和having子句的区别 having的用法 having字句可以让我们筛选成组后的各种数据,where字句在聚合前先筛选记录,也就是说作用在group by和having ...
- 微信pc端和手机上传处理
一.原因 在微信通过电脑版和浏览器登录时,调用了微信上传的接口,wx.getLocalImgData或返回失败. 没办法,只有处理当电脑上传时,使用ajaxuploadfile上传. 二.方法 fun ...