上手vue2的学习笔记4之搭建vue环境

这篇具有很好参考价值的文章主要介绍了上手vue2的学习笔记4之搭建vue环境。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、安装node环境

上手vue2的学习笔记2之安装nodejs和npm的踩坑经历

node -v //查看是否安装成功
npm -v //查看npm是否安装成功

二、搭建vue项目环境

参考链接1:vue(2.0版本)安装步骤教程
参考链接2: MacOS 搭建一个vue项目(完整步骤)

1、安装vue2

        npm install --g vue-cli //安装vue2
        npm install -g @vue/cli  //安装vue3
        vue -V //查看vue是否安装成功

2、创建一个基于 webpack 模板的新项目

# 进入你的项目目录
cd workspace
vue init webpack 项目名

上手vue2的学习笔记4之搭建vue环境,学习,笔记,vue.js
过一会儿会得到
上手vue2的学习笔记4之搭建vue环境,学习,笔记,vue.js
可以在cd的项目路径中查看刚刚创建的项目
上手vue2的学习笔记4之搭建vue环境,学习,笔记,vue.js

3、安装依赖

# 进入项目
cd vue_bing_test
cnpm install 

安装完成之后,项目中会多一个node_modules文件夹,这里面就是所需要的依赖包资源。

4、启动项目

npm run dev

上手vue2的学习笔记4之搭建vue环境,学习,笔记,vue.js
项目启动后,在浏览器中输入项目启动后的地址:http://localhost:8080
在浏览器中会出现vue的logo:
上手vue2的学习笔记4之搭建vue环境,学习,笔记,vue.js文章来源地址https://www.toymoban.com/news/detail-575254.html

到了这里,关于上手vue2的学习笔记4之搭建vue环境的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue2学习笔记のVue中的ajax

    hello, 这篇文章是Vue2学习笔记的第四篇,也是第四章:Vue中的ajax。 vue脚手架配置代理 方法一 在vue.config.js中添加如下配置: 说明: 1 优点:配置简单,请求资源时直接发给前端(8080)即可。 2.缺点:不能配置多个代理,不能灵活的控制请求是否走代理。 3.工作方式:若按照

    2024年02月11日
    浏览(44)
  • Vue2学习笔记のvue-router

    hello, 各位小伙伴,本文是Vue2学习笔记的第六篇:Vue-router。 路由 1.理解: 一个路由(route)就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。 2. 前端路由:key是路径,value是组件。 1.基本使用 1.安装vue-router,命令: npm i vue-router@版本 注意:vue-router

    2024年02月11日
    浏览(32)
  • Vue路由与node.js环境搭建

    目录 前言 一.Vue路由 1.什么是spa 1.1简介 1.2 spa的特点 1.3 spa的优势以及未来的挑战 2.路由的使用 2.1 导入JS依赖 2.2 定义两个组件 2.3 定义组件与路径对应关系 2.4 通过路由关系获取路由对象 2.5 将对象挂载到vue实例中 2.6 定义触发路由事件的按钮  2.7 定义锚点和路由内容 

    2024年02月07日
    浏览(50)
  • Vue项目启动过程全记录(node.js运行环境搭建)

    1、安装node.js 从Node.js官网下载安装包并安装。然后在安装后的目录(如果是下载的压缩文件,则是解压缩的目录)下新建node_global和node_cache这两个文件夹。 node_global:npm全局安装位置 node_cache:npm缓存路径 2、配置环境变量 在系统变量里添加一个变量NODE_HOME,值为node.js的安装

    2024年02月19日
    浏览(47)
  • Vue之路由及Node.js环境搭建(一起探索新事物)

    目录 ​编辑 前言 一、Vue之路由 1.路由简介 1.1 什么是路由 1.2 什么是SPA 1.3 SPA的实现思路 1.4 使用路由的优势 2. 案例演示 2.1 导入所需的js文件 2.2 编写案例代码(模拟页面跳转) 二、Vue之node.js 1. node.js简介 1.1 什么是node.js 1.2 node.js的特点 1.3 什么是npm 1.4 npm的作用及重要性

    2024年02月07日
    浏览(38)
  • Vue路由的使用及node.js下载安装和环境搭建

    目录 一、Vue路由 1.1 简介 ( 1 )  特点 ( 2 )  作用 1.2 实例 ( 1 )  引入 ( 2 )  组件 ( 3 )  关系 ( 4 )  路由 ( 5 )  事件 ( 6 )  锚点 二、nodeJS 2.1  下载 2.2  安装 2.3  环境搭建 新增 添加 测试 配置 运行 Vue路由是Vue.js框架中用于管理页面 导航的插件 。它允许开发者通过定义路由规

    2024年02月07日
    浏览(60)
  • Vue2简单使用及相关基础知识概念(适合小白入门,看完就能上手)

    MVC模式(同步通信为主):Model、View、Controller MVP模式(异步通信为主):Model、View、Presenter MVVM模式(异步通信为主):Model、View、ViewModel(目前主要的模式) 2.1 概念 MVVM是一种软件架构设计模式。MVVM的核心是ViewModel层,负责转换Model层中的数据对象来让数据变得更加容易

    2024年02月07日
    浏览(65)
  • 快速上手 vue.js <二>

    续 vue 一 组件化的核心思想: 对组件进行拆分,拆分成一个个小的组件 再将这些组件嵌套再一起最终形成我们的应用程序 最终整个程序会变成组件树 父子组件之间的通信: 父组件传递给子组件:通过 props 属性 子组件传递给父组件:通过 $emit 触发事件 7.2.1 父组件传递给子

    2024年01月22日
    浏览(61)
  • Springboot+Flask+Neo4j+Vue2+Vuex+Uniapp+Mybatis+Echarts+Swagger综合项目学习笔记

    项目访问入口 Neo4j高性能图数据库从入门到实战 教程博客:Neo4j 开启命令 医学知识图谱问答系统 neo4j知识图谱 Vue+flask 中药中医方剂大数据可视化系统 ECharts数据可视化项目、 D3js: 数据可视化入门D3.js 展示地址:数据可视化 子绝父相 立即执行函数(function(){})(); ECharts官网:

    2024年02月16日
    浏览(72)
  • auto.js教程(autojs教程、autox.js、autoxjs)笔记(二)环境搭建——1、auto.js软件安装及简单使用(安装autojs安装auto.js安装)

    参考文章:【自动化技术】Autojs从入门到精通 参考文章:AutoXJS开发入门简介菜鸟教程 参考文章:关于Auto.js的下架说明 参考文章:Auto.js 4.1.0 文档 https://www.bilibili.com/video/BV1LF411U7GS/?p=4 投屏工具安装:https://www.sigma-rt.com/tc/download/ 如果投屏软件显示字体太小可以更改DPI设置:

    2024年03月14日
    浏览(81)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包