环境搭建

安装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. 创建JavaScript函数的几种方式

    window.onload = function() { // console.log('ok'); //正规的创建函数 function test(abc, d) { return abc(d); ...

  2. Springboot & Mybatis 构建restful 服务三

    Springboot & Mybatis 构建restful 服务三 1 前置条件 成功执行完Springboot & Mybatis 构建restful 服务二 2 restful ...

  3. session实现原理(阿里面试题)

    问: 当用户登录某网站后,向服务器发送一个请求,服务器如何判断是这个用户请求的 首先,你要明白一点,最初http协议在设计的时候,主要面向当时的web1.0网站,他们不需要知道是谁来访问,只需要向外界 ...

  4. VS环境下C++如何检查是否内存泄漏

    c++如何检查是否内存泄漏 今天在做OpenGL引擎的时候,突然想到检查一下内存泄漏.具体是我做了一个渲染类Render,将所有世界中存在的物体的指针都存放在这个类中.于是我不免担心,在Render中 ...

  5. Linux学习---自定义数据类型

    struct   结构体 (地址递增) eg:struct myabc{ unsigned int a; unsigned int b; unsigned int c; unsigned int d; ...

  6. (29)Why Earth may someday look like Mars

    https://www.ted.com/talks/anjali_tripathi_why_earth_may_someday_look_like_mars/transcript00:12So whe ...

  7. 修改云主机windows密码不生效

    Step1:使用文本工具打开插件路径: 路径为:C:\Program Files\Cloudbase Solutions\Cloudbase-Init\Python\Lib\site-packages ...

  8. linux系统中使用socket直接发送ARP数据

    这个重点是如这样创建socket:  sock_send = socket ( PF_PACKET , SOCK_PACKET , htons ( ETH_P_ARP) ) ; 其后所有收发的数据都是 ...

  9. ie9 css文件大小限制

    使用webpack生成CSS对于一些有趣的定义很有趣.不幸的是,当你拥有一个大型应用程序并且需要IE9支持时,乐趣就会停止,因为IE9会忽略你生成的CSS包中的大于4000个选择器的部分.解决方案是将 ...

  10. jasperreports实现pdf文档的生成

    1.导入jar包(pom.xml构建) <dependencies> <dependency> <groupId>com.lowagie</groupId&g ...