当前位置:首页 > 经验 >

vue项目搭建(vue项目搭建首页)

来源:原点资讯(www.yd166.com)时间:2022-11-03 22:16:59作者:YD166手机阅读>>

由于我们项目用的是vue开发的 今天先穿插一个vue项目的搭建步骤,不过现在好多都是从网上找个现成的框架,然后在这个基础上开发(包括我们自己的项目)。但是我们也需要了解一下怎么搭建一个简单的vue项目.

需要按照node环境

1、node的下载地址为:https://nodejs.org/en/ 然后直接就一路安装就可以了,一般没啥事情。如果不放心可以在命令行执行命令node -v 看一下如果显示了版本号就说明安装成功了

如图:

vue项目搭建,vue项目搭建首页(1)

搭建vue项目环境

1、安装vue-cli

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性

执行命令 npm install -g vue-cli

2、创建项目

进入你的工作空间目录,创建一个基于 webpack 模板的新项目:

命令为:“vue init webpack 项目名” 如 vue init webpack vue-test

执行命令效果如下:

vue项目搭建,vue项目搭建首页(2)

对其中的一下命令说一下:

Project name 输入你的项目名称

Project description 输入你的项目描述

Author 这个是项目的作者

其他配置项目

a、Vue build 打包方式,不用管直接回车即可;

b、Install vue-router 安装路由,项目中肯定要使用到 所以y 回车就行;

c、Use ESLint to lint your code js 语法检测 这个要求比较严格 我们项目中都是直接关闭的直接就n回车,如果你感觉不确定就配置也行y回车 以后如果不用的话在关闭;

d、Set up unit tests 单元测试工具 不需要 直接 n 回车;

e、Setup e2e tests with Nightwatch 是否需要 端到端测试工具 不需要 所以 n 回车;

这样一个基本的项目就搭建完成了 可以看一下项目的目录结构:

vue项目搭建,vue项目搭建首页(3)

启动项目

切换到项目目录下执行命令:

1、安装项目使用的插件 npm install

2、启动项目 npm run dev 执行完如下:

vue项目搭建,vue项目搭建首页(4)

这个时候你可以在浏览器中打开网页http://localhost:8080/ 如下:

vue项目搭建,vue项目搭建首页(5)

这基本上就是一个最简单的vue项目的搭建过程 剩下的就是咱们的业务逻辑功能了

3、项目的打包命令

开发完一个vue项目 需要打包成对应的文件 执行命令npm run build 这个时候在目录下会生成一个dist的文件夹 这个文件夹里面的文件就是我们最终的打包文件可以直接放到我们的服务器上就可以。

当然了这里面还有其他的配置。我们接下来回慢慢的学习。

祝愿大家新的一年里面都能进步,月月加薪。

栏目热文

vue怎么使用滤镜(vue怎么下载滤镜)

vue怎么使用滤镜(vue怎么下载滤镜)

出品|三言财经作者|丰收“所有我想留住的东西我都留不住”,“回头一看就是我的青春”,这是不少网友对一款APP宣布停运后的...

2022-11-03 22:43:13查看全文 >>

vue调色滤镜(vue关滤镜)

vue调色滤镜(vue关滤镜)

美味值:口味:乌龙桃桃食堂技术周刊仓库地址:https://github.com/Geekhyt/weekly本期摘要V...

2022-11-03 22:41:02查看全文 >>

vue可以美化界面吗(vue美化教程交流)

vue可以美化界面吗(vue美化教程交流)

前端开发者最主要的工作,就是为网站的使用者(又称为:网站的用户)构建出美观、舒适、好用的网页。vue的出现,逐渐替代了传...

2022-11-03 22:50:19查看全文 >>

为什么vue不适合大型项目(vue解决了什么痛点)

为什么vue不适合大型项目(vue解决了什么痛点)

Web前端基础教程,前端开发基础教程总线(Bus)是计算机各种功能部件之间传送信息的公共通信干线,它是由导线组成的传输线...

2022-11-03 22:52:12查看全文 >>

vue 图片效果(vue 图片切换)

vue 图片效果(vue 图片切换)

大家好,今天给大家介绍一款,用vue实现的,鼠标悬停放大图片,并根据鼠标位置倾斜图片前端网页源码(图1)。送给大家哦,获...

2022-11-03 22:07:45查看全文 >>

最全vue项目实战(vue项目学习与实战技术)

最全vue项目实战(vue项目学习与实战技术)

大家好,我是Echa 哥,祝大家开工大吉!万事如意!前言vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,...

2022-11-03 22:54:11查看全文 >>

vue教程滤镜技术(vue怎么加大头特效)

vue教程滤镜技术(vue怎么加大头特效)

在图片之外,短视频已经成为社交网络中的下一个分享热点。但是和那些经过用心调色和滤镜加持的图片比起来,社交网络里的那些小视...

2022-11-03 22:38:16查看全文 >>

vue 大型项目(vue项目完整过程)

vue 大型项目(vue项目完整过程)

作者|Mybridge译者|无明在过去的一年里,我们比较了将近 12,000 个 Vue.js 开源项目和库,从中挑选了...

2022-11-03 22:10:22查看全文 >>

vue适合开发什么项目(vue适合开发什么网站)

vue适合开发什么项目(vue适合开发什么网站)

vue开发简述vue适合开发哪种项目,这样的话题网络上一搜一大堆,但是不同职位的人都有不同的看法,没有一个统一的结论。v...

2022-11-03 22:35:49查看全文 >>

朗厄兰岛旅行攻略(厄兰岛一日游)

朗厄兰岛旅行攻略(厄兰岛一日游)

短暂而美好的夏天,金色的阳光倾泻,气候温度刚刚好,在这个比金子还要珍贵的季节,遇见童话之国最美丽的“丹麦花园”。丹麦菲英...

2022-11-03 22:40:09查看全文 >>

文档排行