vue.js+node.js前端实战开发(一）————cmd命令搭建项目

最新推荐文章于 2024-05-04 02:45:56 发布
最新推荐文章于 2024-05-04 02:45:56 发布
阅读量764 收藏 1
点赞数
分类专栏： vue 文章标签： vue npm nodejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45049852/article/details/111472755
版权

vue+node前端实战开发

一、准备工作

首先安装一个WebStorm 或者idae（这里不做浏览器创项目方法的赘述，可以自行百度了解4）

  1. 安装node.js,不了解的可以先去百度了解一下node.js是什么？这是安装教程链接 ：node.js安装
  2. 安装npm：npm安装以及介绍！
  3. 安装vue-cli：安装命令：npmi install vue-cli -g

二、 步骤

  1. 打开cmd,如图说明安装成功！

在这里插入图片描述
2. 创建一个空目录，如我在C盘创建名为vueproject的文件夹。使用命令cd到该目录下。
再输入命令 vue list 就会出现搭建好的常用骨架。
在这里插入图片描述
3. 使用命令vue init webpage-simple myvue 创建项目（webpage-simple是使用的骨架名称，myvue是自己的项目名称）
在这里插入图片描述
出现此图说明项目已经创建好了，到C盘下的vueproject目录里就会看到多了一个myvue目录。
在这里插入图片描述
4. 切换目录，下载依赖。
在这里插入图片描述
5. 启动项目，出现一个8080端口。
在这里插入图片描述
8080端口
在这里插入图片描述

成功！

三、编写项目

1.CTRL+C停止项目， 用webstorm打开创建好的项目——myvue。

在这里插入图片描述
在这里启动项目和上面是一样的！在这里webstorm已经帮我们切换到项目目录下了，只需要下载依赖（npm install）就可以直接启动(npm run dev)了

2.编写登陆页面和首页，创建view目录在此目录下新建vue文件
在这里插入图片描述

3.vue文件组成
在这里插入图片描述

4.目录介绍
在这里插入图片描述

代码编写在下一篇文章！仅作参考，请勿商用！

谢同学咯
关注
专栏目录
Vue--》从零开始打造交互体验一流的电商平台（一）
ztK63LrD的博客
05-06 463
今天开始使用搭建一个电商项目平台，因为文章会将项目的每处代码的书写都会讲解到，所以本项目会分成好几篇文章进行讲解，我会在最后一篇文章中会将项目代码开源到我的上，大家可以自行去进行下载运行，希望本文章对有帮助的朋友们能多多关注本专栏，学习更多前端vue知识，然后开篇先简单介绍一下本项目用到的技术栈都有哪几个方面（：快速轻量且功能丰富的前端构建工具，帮助开发人员更高效构建现代Web应用程序。：高性能、轻量级npm替代品，帮助开发人员更加高效地处理应用程序的依赖关系。
Vue前端技术知识整理
shuux666的博客
03-09 5664
VueJS 第一步，安装node.js 安装包下载地址：https://nodejs.org/en/ 安装包下载安装完成后，在命令行使用 node -v 查看node版本，判断是否安装成功。 第二步，安装vue脚手架 安装淘宝镜像： npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack： npm install webpack@3.8.1 -g webpack -v 查看版本号 安装vue-cli脚手架工具
Vue初级总结
LI1142878948的博客
10-20 460
vue初步总结
包学会之浅入浅出Vue.js：升学篇
Qcloud_KID的博客
04-04 1786
上一篇《包学会之浅入浅出Vue.js：开学篇》中，我们初步了解单页面组件这个概念，现在通过一个项目，来进一步解析组件的应用吧，Go~ 需求背景 组件库是做UI和前端日常需求中经常用到的，把一个按钮，导航，列表之类的元素封装起来，方便日常使用，调用方法只需直接写上或者这样的代码就可以，是不是很方便呢，接下来我们将要完成以下页面： 这是我们组件库的首页，包含三个子页面，按钮页
6、electron-vue安装node-cmd
丶诺风的博客
03-22 4万+
安装 node-cmd是使用Nodejs在Windows上调用CMD命令，具体用法请参考node-cmd yarn add node-cmd // 或 cnpm install -save node-cmd yarn安装方式 npm install -g yarn cnpm安装方式 npm install -g cnpm --registry=https://registr...
Vue.js前端开发实战(一)
Alphamilk的博客
07-22 1102
本章讲述Vue的几个基本配置选项
前端自检梳理——Vue.js项目实战开发
是日前端
05-17 1466
01. Vue基础语法 1）总结 2）总结 3）组件化开发 4） 02. Vue路由 目标 总结 03. Vue前端工程化 目标 总结 04. Vue电商项目实战 Day01目标 Day01总结 Day02~Day03目标 Day02总结 Day03总结 Day04目标 Day04总结 Day05目标 Day05总结 Day06目标 Day06总结 Day07目标 Day07总结 05. Vuex电商项目实战 目标 总结 ...
云E办Springboot+vue——前端项目完整版（含源码）
热门推荐
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
08-10 5万+
本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项
Vue+Node前后端项目搭建
leilei__66的博客
06-21 4184
Vue+Node前后端项目搭建 1、安装相关的包和工具 1.1 安装node 1. 安装node.js，网址：http://nodejs.cn/download/ 安装就是一直点next 2. 检查是否安装成功，使用cmd命令（win10：window+r 打开运行输入cmd）——输入“node -v”查看版本即可 1.2 安装vue-cli npm i -g vue-cli 1.3 安装webpack npm i webpack 1.3 安装MySQL数据库 安装mysql，请看[安装教程]
详细总结流行前端框架Vue重难点概念_vue难点
最新发布
2401_84435942的博客
05-04 870
props | 配置 | 该属性用于接收来自父组件的数据 |表2.1注：计算属性与方法的区别：前者基于缓存的。只在相关响应式发生改变时计算属性才会重新求值，即只要响应式不变，多次访问计算属性会立即返回之前缓存的计算结果，而不必再次执行函数；而每次访问方法都会重新执行函数，从效率来看，计算属性优于方法。
Vue.js+Node.js构建音乐播放器
11-09
Vue.js+Node.js构建音乐播放器视频 手把手教你如何做出一个vue播放器
VUE项目实战指南
qq_45832807的博客
02-24 228
电商后台管理系统 前端项目技术栈 vue vue-router element-ui axios echarts 后端项目技术栈 node.js express jwx mysql sequelize 前端项目初始化步骤 安装vue脚手架 通过脚手架创建项目 配置vue路由 配置element-ui组件库 配置axios库 初始化git远程仓库 将本地项目托管到GitHub或码云中 ...
vuejs项目实战
hsw的博客
05-06 1941
文章目录1，项目说明2，定义路由3，异步请求4，头部样式5，分类按钮: home页面中的不变数据6，广告模块：home页面中通过异步请求获取数据7，效果图8，项目模块化 1，项目说明 1、技术架构 vue.js, 模块化，工程化, 移动端 2、目录部署 Css：所有样式文件 Data：所有异步接口 Img：所有图片文件 Js：所有js文件（2.0） index.html 3、结构说明 ...
Vue.js+Node.js全栈开发教程：Node.js核心模块
Lee达森的博客
06-17 326
Node.js的核心模块主要有http、fs、url、querystring模块。下 面分别对这几个模块进行分析。fs模块将在第5章详细介绍。http模块 在第2章的例子中使用过，本节将详细分析其方法和原理。 4.3.1　http模块——创建HTTP服务器、客户端 使用http模块只需要在文件中通过require('http')引入即可。 http模块是Node.js原生模块中最为亮眼的模块。传统的HTPP服务器会 由Apache、Nginx、IIS之类的软件来担任，但是Node.js并不需要。 Node.
webpack+vue.js框架前端开发实战
qq_36428332的博客
10-29 792
学习前端的同学注意了！！！ 学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入前端学习交流群，群号码：328058344 项目展示 1、引导页：（可以左右滑动，点击登录可以跳转进入登录页，点击直接进入官网） 引导 登录2、首页：（ps：可下拉刷新加载) 首页3、发现页：（ps：点击热门推荐可以查看详情页） 搜索页4、详情页 详情页5、信息页：（ps...
云隐-vue.js项目实战
m0_70846476的博客
05-12 152
1.怎么搭建一个前端项目 总体搭建流程图 Vue脚手架初始化一个项目 初始化依赖并规划场景 安装必要的依赖，规划引用的场景。例： 设计业务模块和架构 分站区：根据业务需求或者技术需求进行分站 通用模块抽离：抽离通用模块进行复用 设计业务&功能模块 设计一致性 B端(Business)和C端(Consumer、Client) C端产品服务于个人，B端产品服务于组织。C端产品解决的是用户在生活场景中的某一需求痛点，如百度地图、高德地图解决人们出行导航的需求，饿了么、美团解决人们点外卖的需
Vue.js+Node.js全栈开发教程：Vue.js方法详解
Lee达森的博客
06-21 846
8.2.1　观察属性方法 Vue.js框架设计了一个$watch方法，用于“观察”Vue实例上的属 性是否发生变化。这里的属性变化，具体可以是一个属性表达式的变 化，也可以是稍微复杂的一个函数计算结果的变化。如果$watch方法 观察到了变化，就会通过一个回调函数得到两个参数，分别表示变化 后的新值和变化前的旧值。 下面是关于$watch方法的基本语法格式： 关于这个$watch方法如何实现“观察”Vue实例上的属性变化，我 们还是通过具体的代码实例进行讲解。请看下面这个“观察”计数器 变化的代码。 【
Vue.js+Node.js全栈开发教程：Vue.js指令详解
Lee达森的博客
06-23 716
9.3.1　Vue指令概述 Vue.js框架设计了一个复杂且完整的“指令”系统，用于实现较 为复杂的动态页面渲染功能。在Vue.js框架下，一般的指令 （ Directives ） 都 是 指 带 有 前 缀 （ “v-” ） 的 特 殊 属 性 （Attribute）。 Vue指令的功能是，当表达式的值（一般对应property属性）发生 改变时，将其产生的连带变化“响应式”地作用于D?M，从而完成页面 的渲染操作。关于Vue指令的具体形式，请参考下面的简单示例： 上面代码示例中的v-if就是一个Vue指
【VUE入门】web前端之VUE项目实战开发流程
qq_39172059的博客
03-02 2190
一、拿到项目；二、创建Vue项目1、外部终端创建2、项目介绍；三、安装所需要的插件；四、前端开发流程1、创建结构以及进行编码2、配置路由3、运行项目；五、前后交互；六、项目上线
Vue.js+Node.js+MongoDB实战：构建博客系统（含源码）
"本文将介绍如何使用Vue.js、Node.js和MongoDB构建一个完整的博客系统，包括用户注册、登录、文章管理以及Markdown编辑等功能。同时提供了源码供参考学习。" 在开发这个博客系统的过程中，主要涉及了以下几个关键...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值