环境搭建

安装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 项目实战 (入门)的更多相关文章

  1. webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

  2. vue项目实战, webpack 配置流程记录

    vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...

  3. vue项目实战

    本篇文章主要介绍了vue的环境配置,vue项目的目录结构以及在开发vue项目中问题的一些解决方案. 环境配置及目录结构 1.安装node.js(http://www.runoob.com/nodejs ...

  4. Spring Boot +Vue 项目实战笔记(一):使用 CLI 搭建 Vue.js 项目

    前言 从这篇文章开始,就进入真正的实践了. 在前端项目开发中,我们可以根据实际情况不同程度地使用 Vue.利用 Vue CLI(或写成 vue-cli,即 Vue 脚手架)搭建出来的项目,是最能体现 ...

  5. Vue 项目实战系列 (一)

    最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https:// ...

  6. vue项目实战总结

    马上过年了,最近工作不太忙,再加上本人最近比较懒,毫无斗志,不愿学习新东西,或许是要过年的缘故(感觉像是在找接口). 就把前一段时间做过的vue项目,进行一次完整的总结. 这次算是详细总结,会从项目的 ...

  7. 详细记录vue项目实战步骤(含vue-cli脚手架)

    一.通过vue-cli创建了一个demo. (vue-cli是快速构建这个单页应用的脚手架,本身继承了多种项目模板:webpack(含eslit,unit)和webpack-simple(无eslin ...

  8. vue项目实战经验汇总

    目录 1.vue框架使用注意事项和经验 1.1 解决Vue动态路由参数变化,页面数据不更新 1.2 vue组件里定时器销毁问题 1.3 vue实现按需加载组件的两种方式 1.4 组件之间,父子组件之间 ...

  9. Asp.NET Core2.0 项目实战入门视频课程_完整版

    END OR START? 看到这个标题,你开不开心,激不激动呢? 没错,.net core的入门课程已经完毕了.52ABP.School项目从11月19日,第一章视频的试录制,到今天完整版出炉,离不 ...

随机推荐

  1. thinkphp 5 使用oss

    简单的tp5中上传到 图片到oss我本地开发环境为:WAMP;php版本:5.6.19TP版本:5.1.13 1.使用composer 安装 composer require aliyuncs/oss ...

  2. 问题:计算foldRight(1)(_-_) 与foldLeft(1)(_-_)值不一样

    List(1,2,3,4)问题:计算foldRight(1)(_-_) 与foldLeft(1)(_-_)值不一样首先看foldRight(1)(_-_)计算过程((( (1-1)-2)-3)-4) ...

  3. 致C#,致我这工作一年(下)

    上一篇被很多前辈吐槽排版啊!哈哈!排版是有点土...继续接上文! 依旧跌宕起伏的人生 上次说到我面试通过了,然后我记得那一天的我太高兴了,把这一消息发给我父母和我所有的好基友,然后第二天就入职了,我记 ...

  4. js事件的绑定与移除

    事件的绑定分为3类: <div id='clickEvent'>点击事件</div> 在DOM元素中直接绑定 <div onclick="alert('4567 ...

  5. 循环更新sqlserver数据库表ID

    DECLARE @a INTDECLARE aaa CURSOR for select columnID from LNDB_COLUMN_INFO where columnID BETWEEN 22 ...

  6. springmvc 整合Controller出现实例化两次问题

    启动项目的时候,发现初始化控制层的时候,初始化(使用构造方法打印日志的方式)了两次的情况. 后来检查配置: <context:component-scan base-package=" ...

  7. 将preg_replace()改写为preg_replace_callback()

    preg_replace()函数使用/e修饰符可能带来安全隐患,PHP5.5之后,该用法被抛弃使用,升级为preg_replace_callback().在新版本下运行老版本的代码,会出现错误,如: ...

  8. TYVJ1424-占卜DIY

    题目有点长,对于样例最好拿张A4纸模拟写一遍. 可以发现程序一定不会死循环,因为每种牌都是4张,而死循环的条件是某种牌有5张然后你拿了又放进去.如果写出来死循环了,那就是写不对了. 有几点可能是需要注 ...

  9. bzoj3110(整体二分)

    #include<iostream> #include<cstdio> #include<cmath> #include<cstring> #inclu ...

  10. java反射查看jar包中所有的类名方法名

    不反编译,不用其他工具,用java反射查看jar包中所有的类名方法名,网上很多都报错,下面这个你试试看:话不多说直接撸代码: import java.lang.reflect.Field; impor ...