vue 项目实战 (入门)
环境搭建
安装NodeJS →箭头https://nodejs.org/en/
NPM是随同NodeJS一起安装的包管理工具。
检查环境是否安装成功:
打开一个命令提示符,有成功输出版本号则为安装成功。
//检查node 版本号
node -v
//检查npm版本号
npm -v
安装vue
npm install vue -g
npm install -g @vue/cli
新建项目
vue create vuedemo
选择第一个就是默认配置了babel 跟eslint 一般选择第二个
选择相应的比如说路由啊 vuex 啊 这些基本的配置,键盘上下键移动选择则按空格键选中,确认则回车
安装哪一种 CSS 预处理语言
选择哪个自动化代码格式化检测,因为我是用vscode编辑器的选择了最后一个
询问是否要保存配置,下次新建项目就不需要再次选择了
babel,postcss,eslint这些配置文件放哪
1.放独立文件放置 2.放package.json里
根据我们刚才所选择的配置 就开始安装相关的依赖和包了
运行项目
cd vuedemo
npm run serve
跑起来后浏览器打开
好了,就这样基本上这样你就跑起来一个vue 项目了
此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。
如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。
vue 项目实战 (入门)的更多相关文章
- webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)
地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...
- vue项目实战, webpack 配置流程记录
vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...
- vue项目实战
本篇文章主要介绍了vue的环境配置,vue项目的目录结构以及在开发vue项目中问题的一些解决方案. 环境配置及目录结构 1.安装node.js(http://www.runoob.com/nodejs ...
- Spring Boot +Vue 项目实战笔记(一):使用 CLI 搭建 Vue.js 项目
前言 从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 ...
- Vue 项目实战系列 (一)
最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https:// ...
- vue项目实战总结
马上过年了,最近工作不太忙,再加上本人最近比较懒,毫无斗志,不愿学习新东西,或许是要过年的缘故(感觉像是在找接口). 就把前一段时间做过的vue项目,进行一次完整的总结. 这次算是详细总结,会从项目的 ...
- 详细记录vue项目实战步骤(含vue-cli脚手架)
一.通过vue-cli创建了一个demo. (vue-cli是快速构建这个单页应用的脚手架,本身继承了多种项目模板:webpack(含eslit,unit)和webpack-simple(无eslin ...
- vue项目实战经验汇总
目录 1.vue框架使用注意事项和经验 1.1 解决Vue动态路由参数变化,页面数据不更新 1.2 vue组件里定时器销毁问题 1.3 vue实现按需加载组件的两种方式 1.4 组件之间,父子组件之间 ...
- Asp.NET Core2.0 项目实战入门视频课程_完整版
END OR START? 看到这个标题,你开不开心,激不激动呢? 没错,.net core的入门课程已经完毕了.52ABP.School项目从11月19日,第一章视频的试录制,到今天完整版出炉,离不 ...
随机推荐
- 1179: 零起点学算法86——小明A+B(未弄懂)
1179: 零起点学算法86——小明A+B Time Limit: 1 Sec Memory Limit: 32 MB 64bit IO Format: %lldSubmitted: 2540 ...
- Swift 加载 xib 崩溃问题
新版本用 Swift开发 遇到的坑 解决方法
- java反射获取Object的属性和值
在看反射顺便做个笔记,目前知道的反射的Object都是要有对象的也就是实体Bean. import java.lang.reflect.Field; import java.util.ArrayLis ...
- 我的数据,我做主——RecoveryManager Plus
我的数据,我做主——RecoveryManager Plus RecoveryManager Plus除了支持对Exchange On-premise邮箱的备份恢复,还可以支持对Microsoft E ...
- #2019-2020-4 《Java 程序设计》第七周总结
2019-2020-4 <Java 程序设计>第七周知识总结 第八章:常用实用类 一.String类 String类的构造方法 public String(byte[] bytes); p ...
- 初入TensorFlow————配置TensorFlow
能看到这说明你对python已经有一定的了解了,因此很多基础直接跳过. 一.TensorFlow环境配置: TensorFlow的环境配置在网上很多的教程都是用anaconda的方式,但是很容易出现冲 ...
- 排序算法(sorting algorithm)之 插入排序(insertion sort)
https://en.wikipedia.org/wiki/Insertion_sort loop1: 4,6,1,3,7 -> 4,6,1,3,7 loop2: 4,6,1,3,7 -> ...
- C++ STL next_permutation(快速排列组合)
排列组合必备!! https://blog.csdn.net/bengshakalakaka/article/details/78515480
- 为什么重写equals一定要重写hashCode?
大家都知道,equals和hashcode是java.lang.Object类的两个重要的方法,在实际应用中常常需要重写这两个方法,但至于为什么重写这两个方法很多人都搞不明白,以下是我的一些个人理解. ...
- Django积木块九——富文本编辑器
富文本编辑器 前端和后端都可以用富文本编辑器 # pip install django-tinymce # setting 'tinymce' TINYMCE_DEFAULT_CONFIG = { ' ...