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日,第一章视频的试录制,到今天完整版出炉,离不 ...
随机推荐
- 《Miracle-House团队》项目需求分析改进
(一)团队项目需求分析改进 一.<西小餐项目需求规格说明书>的不足 通过老师和其他同学的指正和建议,我们发现上次的需求规格说明书存在以下不足: 1.需求规格文档不够完整和规范: 2.系统设 ...
- jhipster安装_Windows
1:安装 Node.js lts版本的 https://nodejs.org/en/ 2:安装Yarn https://yarn.bootcss.com/docs/install.html 3:修改y ...
- Naïve Media Player
我的GitHub链接:https://github.com/Joyce45/hwt 一.播放器?怎么做? 提到播放器,首先想到的就是XAML控件库里的MediaElement,于是我又大致阅读了一下该 ...
- python的文件读写笔记
读写文件是最常见的IO操作.Python内置了读写文件的函数,用法和C是兼容的. 读写文件前,我们先必须了解一下,在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序直接操作磁盘, ...
- enum枚举类
枚举类可用于定义常量ch01 package edu.nf.demo.ch01; /** * * 枚举类型 */ public enum Color { /** * 红色 */ RED, /** * ...
- X86给龙芯笔记本编译本地工具链(未完待续)
我买了一台龙芯2F的笔记本来当玩具. 买回来发现,这台笔记本上没法安装软件,因为既没有软件仓库,也没有GCC. 因此需要构建交叉工具链和构建本地工具链. 下面是我研究如何搞定着一切的笔记. 工具链组件 ...
- python之路(五)-文件操作
文件操作无非两个,即:读.写 python 2.x: 文件句柄 = file('文件路径', '模式') python3.x: 文件句柄 = open('文件路径', '模式') 打开文件的模式有: ...
- java解析json数据用到的jar包
百度云连接: https://pan.baidu.com/s/1iuQCc7uBO5XtAsNn6hwCew
- TYVJ1424-占卜DIY
题目有点长,对于样例最好拿张A4纸模拟写一遍. 可以发现程序一定不会死循环,因为每种牌都是4张,而死循环的条件是某种牌有5张然后你拿了又放进去.如果写出来死循环了,那就是写不对了. 有几点可能是需要注 ...
- 微信小程序——地图
一:如何标点问题 地图模块需要用标点:官网API里面的wx.createMapContext(mapId, this)接口,且用官网Demo,小程序运行报错此时需要在wxml里面给map标签添加属性m ...