首页 > 前端开发 > 正文

web前端开发vue项目实战 vue项目怎么运行

2023-09-23 10:06:42 | 我爱编程网

web前端开发vue项目实战 vue项目怎么运行相关内容,小编在这里做了整理,希望能对大家有所帮助,关于web前端开发vue项目实战 vue项目怎么运行信息,一起来了解一下吧!

web前端开发vue项目实战 vue项目怎么运行

前端项目中如何搭建JQuery、Vue等开发环境


这次给大家带来前端项目中如何搭建JQuery、Vue等开发环境 ,前端项目搭建JQuery、Vue等开发环境的注意事项有哪些,下面就是实战案例,一起来看一下。
vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器。当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,editplus,atom这几种。比起notepad++、editplus,vscode集成了许多IDE才具有的功能,比起它们更像一个代码编辑器;比起sublime,vscode颜值更高,安装配置插件更为方便;比起atom,vscode启动速度更快,打开各种大文件不卡。可以说,vscode既拥有高自由度、又拥有高性能和高颜值,最关键的是,vscode还是一款免费并且有团队持续快速更新的代码编辑器。可以说,vscode是代码编辑器的首选。个人推荐编写前端代码时,代码编辑器选择vscode,IDE选择WebStorm。
vscode安装插件只需要点击图片所示按钮,即可进入拓展,在搜索框中输入插件名点击安装后,等待安装好即可点击重新加载重启vscode使得插件生效。
当你不需要某个插件时只需要进入扩展,点击对应插件右下角的齿轮按钮即可选择禁用或卸载该插件。
下面,我将推荐一些我认为对编写前端代码比较有帮助的vscode插件:
1.Auto Close Tag
自动闭合HTML/XML标签
2.Auto Rename Tag
自动完成另一侧标签的同步修改
3.Beautify
格式化代码,值得注意的是,beautify插件支持自定义格式化代码规则,例如:
{
"indent_size": 4,
"indent_char": " ",
"css": {
"indent_size": 2
}
}mac版vscode中beautify的默认格式化代码按键为cmd+b,也可以自定义快捷键
4.Bracket Pair Colorizer
给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色
5.Debugger for Chrome
映射vscode上的断点到chrome上,方便调试
6.ESLint
js语法纠错,可以自定义配置,不过配置较为复杂,建议使用网上一些广泛使用的eslint配置,日后我也会专门针对eslint配置写一篇文章。
7.GitLens
方便查看git日志,git重度使用者必备
8.HTML CSS Support
智能提示CSS类名以及id
9.HTML Snippets
智能提示HTML标签,以及标签含义
10.JavaScript(ES6) code snippets
ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间

11.jQuery Code Snippets
jQuery代码智能提示
12.Markdown Preview Enhanced
实时预览markdown,markdown使用者必备

13.markdownlint
markdown语法纠错

14.Material Icon Theme
个人认为最好的vscode图标主题,支持更换不同色系的图标,值得点出的是,该插件更新极其频繁,基本和vscode更新频率保持一致

15.open in browser
vscode不像IDE一样能够直接在浏览器中打开html,而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari
16.Path Intellisense
自动提示文件路径,支持各种快速引入文件
17.React/Redux/react-router Snippets
React/Redux/react-router语法智能提示
18.Vetur
Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。
总结:vscode自从发布以来就横扫各大社区(毕竟微软爸爸),成为了许多开发者的首选代码编辑器。我根据个人vscode使用经验推荐了以上18个插件,希望能对大家有所帮助。同时,也欢迎大家进行交流!
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
在前端中的html基础知识

知名的网站前端布局分析

web前端开发vue项目实战 vue项目怎么运行

vue项目完整搭建步骤

为了让一些不太清楚搭建前端项目的小白,更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架,那vue作为三大框架主流之一,在工作中很常用。所以就以vue为例。

下载并安装node

下载地址为:

在 nodejs官网下载最新版稳定版的node.js安装,自带了npm工具 ,推荐下载左边的。

检查node是否安装成功

为了更快安装,可以使用淘宝的镜像:

在终端输入以下命令:

检测cnpm是否安装成功

vue-cli是vue脚手架工具,方便打包,部署,测试等。

进入你的项目目录,创建一个基于 webpack 模板的新项目: vue init webpack 项目名

进入项目

安装依赖

此时项目中会多了一个node_modules

启动成功

web前端开发vue项目实战 vue项目怎么运行

vue项目怎么运行


github的vue项目怎么在vscode运行?

打开config/index.js并找到devtool属性。

用本地git客户端将vue项目从github克隆到本地,用vscode打开,完成编辑。在vscode里新打开一个命令行终端,在终端窗口里使用vue对应的脚手架命令启动项目。

通过快捷方式打开VisualStudioCode工具,然后新建静态页面。创建一个静态页面table.html,并添加页面代码,然后保存,使用浏览器查看。点击File菜单,选择OpenFolder,将项目导入到VisualStudioCode。

运行vue项目

npminstall//或cnpminstall将Vuebuild后生成的dist文件夹下的所有文件复制到express项目的publick文件夹下面,然后运行npmstart来启动express项目。 我爱编程网

从云上拉取的vue项目一般会缺少node_modules,需要先安装node_modules,再运行。

vue项目运行后显示需要配置原因是配置不够。根据相关公开信息显示:配置Vue的app项目首先需要配置本地环境,本地配置即移动端配置过低会显示需要配置,故vue项目运行后显示需要配置原因是配置不够。

ssm框架vue前端项目怎么跑

可以使用参数来设置,得到符合不同需要的编译结果。之后即可以将打包的文件部署到服务器上。

学习前端框架Vue的步骤如下:了解Vue框架的基本概念和特点。了解Vue框架的基本架构和工作原理,包括Vue的视图层渲染、数据绑定、组件化和路由等功能。学习Vue框架的基本语法和使用方法。

前端开发不需要配编译环境了,只需要把需要的各种库、工具在命令行界面安装就行。具体过程网上搜“从零开始搭建vue项目”。

脚手架里带的Node部分,主要充当的是WebServer,跟浏览器有什么关系?最后都是要Webpack打包成纯粹的html/css/js项目的。

对于vue的使用可以分为两种使用形式:引入vue.js文件,在js中将vue实例化;通过node安装第三方包--vue,搭建脚手架,用脚手架将页面分成几个组件编写,从而利用组件来搭建页面。

上一节安装了flask,我们现在需要安装vue前端框架,需要使用vue-cli方便安装和管理。

拉取Vue项目运行问题

1、这个错误提示表明在运行Vue项目的时候,系统找不到neo-async这个模块,可能是由于项目配置或者第三方库缺失导致的。

2、使用排除法吧,首先你这个项目是第一次创建的吗?如果是,去创建项目的文件夹看看有没有生成node_modules文件夹。如果没有,去配置里面把缓存删除再重新创建项目。

3、项目运行报错xxxxxxxx/node_modules/.bin/gulp:Permissiondenied没有权限解决方法:chmod777node_modules/.bin/gulp然后在运行就好了。

4、npminstall//或cnpminstall将Vuebuild后生成的dist文件夹下的所有文件复制到express项目的publick文件夹下面,然后运行npmstart来启动express项目。

5、执行npminstall来安装组件LIMIT是你想分配的内存大小,然后执行npmrunfix-memory-limit只需要执行一次即可,然后重新启动项目,热更新就不会再内存溢出了。

6、下载完别人的VUE项目后,我们执行下载所有依赖npminstall后启动npmrundev运行的最后一步经常会报错,不是缺少依赖模板,就是node_modules版本与本机安装的node和npm版本不一致。

vue.j在什么上面运行

1、Vue.js是web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue.js自身不是一个全能框架——它只聚焦于视图层。

2、vue.js是一个Js框架。在node里面通过Npm安装,是为了方便进行模块化管理。这样你的整个项目就能实现模块化组件化,并且按需加载。

3、在搭建vue的开发环境之前,一定一定要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,node可以在官网或者中文网里面下载,根据自己的电脑选择是32还是64。

以上就是web前端开发vue项目实战 vue项目怎么运行全部内容了,了解更多相关信息,关注我爱编程网。

免责声明:文章内容来自网络,如有侵权请及时联系删除。
与“web前端开发vue项目实战 vue项目怎么运行”相关推荐