当前位置： 首页 > news >正文

创建基于Vue2.0开发项目的两种方式

news 文章来源：https://blog.csdn.net/dawn0718/article/details/129043376 2024/11/5 17:25:43

　　前天开始接触基于Vue2.0的前端项目，实际操作中肯定会遇到一些问题，慢慢摸索和总结。
　　其实，作为开发一般企事业单位应用的小项目，前端的懂一点HTML+CSS+JavaScropt+JQuery+Json（或者Xml），后端懂一点PHP、Jsp（或者Servlet）、Asp.net等，掌握这些就足够了。
　　但是，如果要开发大一点、正规一些的项目，还是要应用主流的开发技术。
　　大概2000年的时候，我认识一个写VC++程序的朋友，他给我说要到北京去发展，当时我问他ODBC方面的内容，他竟然不知道ODBC，我当时真是惊叹，北京可是技术高精尖人才扎堆的地方，他这水平能立足吗？！
　　可是，仅仅过了3年，他就当上了他们公司开发部的经理。当时听说后，想起我仍然在单位拿着2000多一点的工资，只能无奈地感叹。
　　前端依赖以前的框架比如JQuery、LayUI、EaseUI等基本上是通过静态引用，原理简单清晰，使用EAMCScript5语言，略微懂点前端技术的人就可以胜任开发工作，进阶的难度也不大。
　　现在的项目基于EAMCScript6、组件化、Node.JS、npm、Webpack等，与以前相比，不仅仅是语法的不同，项目创建、开发、理念等发生了很大的变化。

　　⑴ 项目创建
　　●以前的项目：创建一个项目目录，在该目录下创建资源目录、JS目录、发布目录，将需要的文件拷贝到相应的目录就可以进行开发了。
　　●现在的项目：依赖管理、组件的版本控制复杂，手工创建就麻烦一些，一般通过框架的脚手架来进行项目创建。

　　⑵ 项目开发
　　●以前的项目：通过普通的记事本编辑器编辑代码即可，编写完代码直接拷贝到发布目录。在其他编辑器里编写代码，安装的插件不多，就是语法提示、测试单元等。
　　●现在的项目：开发一般不会在简易的记事本里开发了，需要在适用于前端开发编辑器如VSCode、HBuilder X、IDEA中进行，这些编辑器中可以安装众多利于开发的插件，依赖于配置，编辑器和组件可以帮助我们完成一系列的开发、测试、打包、部署工作。

　　⑶ 项目运行
　　●以前的项目：在开发测试、部署运行大多在Apache（PHP）、Tomcat（JSP）、IIS（ASP.Net）等web服务器中运行，前端代码基本上都在用户的浏览器端运行，服务器端优化的内容并不多。
　　●现在的项目：开发测试的手段比较多，使用独立的Web服务器中运行，也可以是在以插件方式运行于编辑器的web服务器（轻量级），实际部署运行也是在Apache、Tomcat等web服务器中运行，可是优化的内容就多了，因为很多代码是基于Node.JS，是在服务器端运行的。

　　一、通过Vue脚手架创建Vue2.0的开发项目
　　⑴ 安装Node.JS。
　　《node.js(1)：初体验》
　　安装包的下载地址
　　⑵ 安装Vue-cli
　　Vue-CLI 是一个官方提供的命令行工具，俗称脚手架，用于快速创建 Vue项目。在终端中输入以下命令安装 Vue-CLI：

npm install -g @vue/cli

　　⑶ 创建项目
　　在终端中进入你想要创建项目的目录，执行创建项目的命令：
　　vue create my-app
　　⑷ 选择项目属性
　　我使用Vue-CLI v5.0.8，只需要选择Vue版本即可创建。

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)       Default ([Vue 2] babel, eslint)       Manually select features

　　移动光标到【Default ([Vue 2] babel, eslint)  】，按下回车即可。
　　⑸ 编写代码
　　可以根据的需要编写代码。
　　⑹ 运行测试

npm run serve

　　⑺ 发布项目

npm run build

　　结果显示图：


 

　　虽然使用Vue脚手架就可以方便快捷地创建Vue项目，并且Vue CLI Service提供了许多的功能和开发体验，但是现在很多情况下，大多数开发者都使用npm结合webpack创建项目。
　　首先，Vue CLI Service的很多定制化的配置也是基于Webpack的使用。
　　其次，webpack是一个通用的模块打包器，它可以处理许多不同类型的资源，并且可以与许多其他框架和库一起使用。
　　此外，使用npm和webpack可以提供更好的控制和定制化能力。webpack提供了许多插件和加载器，可以方便地扩展和定制打包过程。npm则可以方便地管理和发布模块以及处理项目的依赖关系。
 　　二、通过npm和webpack手工创建Vue2的开发项目

　　⑴ 安装Node.JS。
　　《node.js(1)：初体验》

　　⑵ 创建项目文件夹

　　例如在磁盘上创建Vue目录并进入该目录。

　　⑶ 使用npm初始化

npm init -y

　　⑷ 安装Vue和相关依赖

npm install vue@2.6.12 webpack webpack-cli webpack-dev-server vue-loader vue-template-compiler css-loader style-loader --save-dev

　　⑸ 创建项目结构及文件

　　在Vue目录下创建src目录，并在其中建立main.js和App.vue文件（文件内容为空）。

　　在Vue目录下创建index.html和webpack.config.js文件（文件内容为空）。

　　其中，src 文件夹存放JavaScript文件和Vue组件，index.html是项目的入口 HTML 文件，webpack.config.js是 webpack 的配置文件。

　　⑹ 编写代码

　　● main.js

import Vue from 'vue'
import App from './App.vue'new Vue({el: '#app',render: h => h(App)
})

　　● App.vue

<template><div><h1>Hello, World!</h1></div>
</template><script>
export default {name: 'App'
}
</script><style>
h1 {color: red;
}
</style>

　　● index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>My Vue App</title></head><body><div id="app"></div><script src="bundle.js"></script></body>
</html>

　　⑺ 配置webpack

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'},module: {rules: [{test: /\.vue$/,loader: 'vue-loader'},{test: /\.css$/,use: ['style-loader','css-loader']}]},plugins: [new VueLoaderPlugin()]
}

　　⑺ 测试

npm run serve

　　⑻ 发布打包

npm run build


　　三、可能遇到的问题及解决办法

　　vue create myapp，项目创建失败

　　⑴ Vue下载不完全，删除后重新创建

　　⑵ Vue的执行权限受限，改变权限

 

　　四、疑问及解释

　　⑴ npm install -g @vue/cli，为什么要加@符号？

　　在npm中，以@符号开头的包名表示这个包是一个作用域包（scoped package）。@vue/cli就是Vue.js官方提供的作用域包，用于安装Vue.js的命令行工具。通过在包名前加上@符号，可以帮助区分这个包属于哪个组织或者作者，避免与其他包重名。
　　其实，等同于

npm install -g vue-cli

　　⑵ 运行vue-cli-service build就可以打包了，为什么还要使用webpack呢？

　　运行 vue-cli-service build 实际上就是执行 webpack 打包流程的一个封装。
　　尽管 Vue CLI 对 webpack 进行了封装，但是在某些场景下，我们需要对 webpack 的配置进行更加精细的控制，或者我们需要使用一些 Vue CLI 中没有默认配置的 webpack 插件。
　　Vue CLI 中提供的一些自定义配置项，实际上也是针对 webpack 的配置进行的。
　　虽然在大多数情况下，我们可以直接使用 Vue CLI 提供的命令来进行项目打包，但是对 webpack 进行更深入的学习和使用，对于理解和掌握 Vue CLI 的打包流程和自定义配置，以及在项目开发中遇到问题时进行调试和解决，都是非常有帮助的。

　　⑶ vue.config.js和Webpack.config.js都包含了对Webpack的定义，不冲突吗？

　　vue.config.js 和 webpack.config.js都是webpack 的配置文件，它们之间的关系是互补的。
　　当我们在 vue.config.js 中定义了某些 webpack 配置时，这些配置会被合并到 Vue CLI 默认的 webpack 配置中。而如果我们需要更细粒度地控制 webpack 配置，或者需要使用一些 Vue CLI 中没有提供的 webpack 插件或功能，我们可以在项目根目录下创建一个 webpack.config.js 文件，并在其中编写自己的 webpack 配置。
　　在使用 vue-cli-service 命令时，Vue CLI 会自动将 webpack.config.js 文件和 vue.config.js 文件中的配置和默认配置进行合并，生成最终的 webpack 配置。
　　需要注意的是，如果在 vue.config.js 和 webpack.config.js 文件中都定义了相同的 webpack 配置，webpack.config.js 文件中的配置将覆盖 vue.config.js 文件中的配置。因此，开发者需要注意确保不会出现重复的配置。

相关文章：

创建基于Vue2.0开发项目的两种方式

前天开始接触基于Vue2.0的前端项目&#xff0c;实际操作中肯定会遇到一些问题&#xff0c;慢慢摸索和总结。 　　其实&#xff0c;作为开发一般企事业单位应用的小项目&#xff0c;前端的懂一点HTMLCSSJavaScroptJQueryJson&#xff08;或者Xml&#xff09;&#xff0c;后端懂一…...

编程日记 2023/2/18 17:39:09

[测试]性能测试

最近遇到一个性能测试的问题&#xff0c;虽然最后确定是一个乌龙问题。这里还是总结一下&#xff0c;看是否有可以从中学到什么。 场景&#xff1a; 月底要出一个新版本。测试人员发现这个新版本在相同的负载的情况下&#xff0c;会有队列使用负荷过高的警告。之前的版本没有。…...

编程日记 2023/2/18 17:38:03

剑指 Offer 21. 调整数组顺序使奇数位于偶数前面

摘要 剑指 Offer 21. 调整数组顺序使奇数位于偶数前面 一、双指针解析 考虑定义双指针 i , j分列数组左右两端&#xff0c;循环执行&#xff1a; 指针 i从左向右寻找偶数&#xff1b;指针 j从右向左寻找奇数&#xff1b;将偶数nums[i]和奇数 nums[j]交换。 可始终保证&…...

编程日记 2023/2/18 17:36:40

实用版ChatBing论文阅读助手教程+新测评

实用版ChatBing论文阅读助手新测评 AI进化&#xff08;更新&#xff09;的速度太快了&#xff01;距离我上次的【Chat嘴硬&#xff01;基于NewBing的论文调研评测报告】&#xff0c;才四天&#xff0c;它已经进化到快能用的地步了&#xff01; 这次是我刷B站看到热门推荐&…...

编程日记 2023/2/18 17:35:32

Linux生产者消费模型

1.生产者消费者模型 1.1 为何要使用生产者消费者模型 生产者消费者模式就是通过一个容器来解决生产者和消费者的强耦合问题。生产者和消费者彼此之间不直接通讯&#xff0c;而通过阻塞队列来进行通讯&#xff0c;所以生产者生产完数据之后不用等待消费者处理&#xff0c;直接…...

编程日记 2023/2/18 17:34:21

动态网站开发讲课笔记01：网页开发基础

文章目录零、本讲学习目标一、HTML基础&#xff08;一&#xff09;HTML简介1、HTML2、HTML语言的基本格式3、<!DOCTYPE>声明4、html标签5、head标签6、body标签7、编写第一个网页8、关于编写HTML文件的工具9、HTML标签概述&#xff08;1&#xff09;单标签&#xff08;2&…...

编程日记 2023/2/18 17:33:07

互联网新时代要到来了（三）什么是ChatGPT?

什么是ChatGPT? tips&#xff1a;资料来自百度百科、openAi、CSDN博主「琦在江湖飘」、Info写作社区、CSDN博主「夕小瑶」等网页资料。 1.什么是ChatGPT&#xff1f; ChatGPT&#xff08;全名&#xff1a;Chat Generative Pre-trained Transformer&#xff09;&#xff0c;…...

编程日记 2023/2/18 17:32:00

华为OD机试 - 环中最长子串（Python）

环中最长子串 题目 给你一个字符串s,首尾相连成一个环形, 请你在环中找出o字符出现了偶数次最长子字符串的长度. 备注: 1 <= s.lenth <= 5x10^5 s只包含小写英文字母 输入 输入是一个小写字母组成的字符串 输出描述 输出是一个整数 示例一 输入 alolobo输出 6说…...

编程日记 2023/2/18 17:30:34

安全—08day

ApabilitiesapabilitiesLinux Capabilities线程的 capabilitiesPermitted 允许Effective 有效InheritableBoundingAmbient文件的 capabilitiesPermittedInheritableEffective运行 execve() 后 capabilities 的变化案例分析方法一、依次执行如下命令方法二、iptables端口转发方案…...

编程日记 2023/2/18 17:29:24

【看表情包学Linux】进程地址空间 | 区域和页表 | 虚拟地址空间 | 初识写时拷贝

&#x1f923; 爆笑教程 &#x1f449; 《看表情包学Linux》&#x1f448; 猛戳订阅 &#x1f525; &#x1f4ad; 写在前面&#xff1a;本章核心主题为 "进程地址空间"&#xff0c;会通过验证 Linux 进程的地址空间来开头&#xff0c;抛出 "同一个值能有不同内…...

编程日记 2023/2/18 17:28:18

响应式编程（Reactive Programming）介绍

什么是响应式编程? 在互联网上有着一大堆糟糕的解释与定义。Wikipedia 一如既往的空泛与理论化。Stackoverflow 的权威答案明显不适合初学者。Reactive Manifesto 看起来是你展示给你公司的项目经理或者老板们看的东西。微软的 Rx terminology"Rx Observables LINQ S…...

编程日记 2023/2/18 17:27:11

你不知道的美化列表的两种方案-＜ul/＞＜ol/＞

大家好，我是半夏👴，一个励志更文1000篇沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 一起学习交流前端，成为更优秀的工程师～ CSS为什么这么难学？一定是你方法不对!!! 只要一杯奶茶，CSS任你学。学透CSS,拒绝切图仔！！！ 学透CSS传送门 文章目录 学透CSS传送门前言li…...

编程日记 2023/2/18 17:26:02

2023年浙江理工大学MBA招生考试初试成绩查询及复查的通知

根据往年的情况&#xff0c;2023浙江理工大学MBA考试初试成绩可能将于2月21日下午两点公布&#xff0c;为了广大考生可以及时查询到自己的分数&#xff0c;杭州达立易考教育为大家汇总了信息。 一、成绩查询考生可登录中国研究生招生信息网“全国硕士研究生招生考试初试成绩查询…...

编程日记 2023/2/18 17:24:52

SVNH数据(.mat格式)转为图像（.png）matlab代码

一、获取SVNH数据数据集集地址-http://ufldl.stanford.edu/housenumbers/提供两种格式的数据&#xff1a;1.Format 1&#xff0c;图像形式&#xff0c;压缩包2.Format 2&#xff0c; .mat格式的数据10 classes, 1 for each digit. Digit 1 has label 1, 9 has label 9 and 0 ha…...

编程日记 2023/2/18 17:23:45

【总结】vim教程与详细命令总结，该来的躲不掉啊晕

B站|公众号&#xff1a;啥都会一点的研究生 目录写在前面vim的工作模式普通模式编辑模式命令模式命令大全&#xff0c;最详细&#xff08;建议收藏&#xff09;光标的移动插入模式 - 插入/追加文本编辑文本选择文本&#xff08;可视化模式&#xff09;可视化模式命令剪切, 复制…...

编程日记 2023/2/18 17:22:38

git基础使用

Git安装 去安装>> 正式开始 进入要管理的目录&#xff0c;执行命令 git init 查看管理目录下的状态 git status 注&#xff1a;新增文件和修改过后的文件都是红色 管理指定文件&#xff08;红变绿&#xff09; 指定文件&#xff1a;git add 文件名 当前目录下所有&…...

编程日记 2023/2/18 17:21:31

基于 RANSAC 的地面分割与聚类算法

文章目录 前言 一、算法原理 参考文献 二、代码实现 1.头文件 2.源文件...

编程日记 2023/2/18 17:20:24

JVM内存模型深度剖析与优化

1. Java语言的跨平台特性 2. JVM整体结构及内存模型 堆存放着对象信息每个线程都会分配一块属于自己的内存空间&#xff08;栈空间&#xff09; 每个方法都会分配一块内存空间&#xff08;栈桢&#xff09;&#xff0c;上图 compute()方法 和 main()方法 都会分配到各自的栈桢空…...

编程日记 2023/2/18 17:19:13

软件性能测试定义中文

From Wiki软件性能测试在软件质量保证中&#xff0c;性能测试通常是一种测试实践&#xff0c;用于确定系统在特定工作负载下的响应能力和稳定性方面的表现。它还可以用于调查、测量、验证或验证系统的其他质量 属性&#xff0c;例如可扩展性、可靠性和资源使用。性能测试是性能…...

编程日记 2023/2/18 17:18:04

2023情人节正经性生活调研报告

省时查报告-专业、及时、全面的行研报告库省时查方案-专业、及时、全面的营销策划方案库【免费下载】2023年1月份热门报告合集ChatGPT的发展历程、原理、技术架构及未来方向2023年&#xff0c;如何科学制定年度规划&#xff1f;《底层逻辑》高清配图今天给大家带来丁香医生最新…...

编程日记 2023/2/18 17:16:56

22- 隐马尔科夫HMM (NLP自然语言算法) (算法)

HMM模型 : from hmmlearn.hmm import GaussianHMM model GaussianHMM(n_components3,n_iter100000, covariance_type diag) model.fit(X) 1、马尔科夫链 有向图模型&#xff08;贝叶斯网络&#xff09;&#xff1a;用有向图表示变量间的依赖关系&#xff1b; 无向图模型&…...

编程日记 2023/2/18 17:15:47

gRPC是什么，怎么用

RPC是什么 RPC是指远程过程调用&#xff0c;也就是说两台服务器A&#xff0c;B&#xff0c;一个应用部署在A服务器上&#xff0c;想要调用B服务器上应用提供的函数/方法&#xff0c;由于不在一个内存空间&#xff0c;不能直接调用&#xff0c;需要通过网络来表达调用的语义和传…...

编程日记 2023/2/18 17:14:38

linux基本功系列之fdisk命令实战

文章目录前言一. fdisk命令介绍二. 语法格式及常用选项三. 参考案例3.1 列出每个分区的大小3.2 分区操作3.2.1 添加硬盘3.2.2 开启虚拟机并分区3.3.3 分区完成后进行格式化挂载四 . 设置分区自动挂载前言 大家好&#xff0c;又见面了&#xff0c;我是沐风晓月&#xff0c;本文…...

编程日记 2023/2/18 17:13:29

Mysql UDF提权复现Raven2

Raven2通关过程 主要通过Raven2靶机进行复现Mysql UDF提权&#xff0c;以下为通关过程。 靶机镜像&#xff1a;https://www.vulnhub.com/entry/raven-2,269/ 信息收集 拿到靶机ip&#xff1a;192.168.112.129 nmap -sP 192.168.112.0/24探测开放端口&#xff0c;nmap用烂了…...

编程日记 2023/2/18 17:12:20

枚举类（enum）

定义&#xff1a;在某些情况下&#xff0c;一个类的实例对象是有限且固定的&#xff0c;可将该类称为“枚举类”。枚举类是JDK 1.5 之后提出来的。例如&#xff1a;四季只有春夏秋冬4个季节&#xff0c;性别只有男女2个&#xff0c;故四季类和性别类均可称为“枚举类”。 在自…...

编程日记 2023/2/18 17:11:10

腾讯云架构师亲码“redis深度笔记”，从入门到精通，面面俱到

前言 作为这个时代码代码的秃头人员&#xff0c;对Redis肯定是不陌生的&#xff0c;如果连Redis都没用过&#xff0c;还真不好意思出去面试&#xff0c;指不定被面试官吊打多少次。 毕竟现在互联网公司和一些创业公司都要用到Redis&#xff0c;像亚马逊、谷歌、阿里、腾讯都要…...

编程日记 2023/2/18 17:08:59

萌新应该如何开始学习走向自动化测试高薪岗位？

对于测试人员来说&#xff0c;不管进行功能测试还是自动化测试&#xff0c;还是性能测试&#xff0c;都是需要编写测试用例&#xff0c;所以我们必须先要了解清楚手工测试用例与自动化测试用例的一些特点&#xff0c;才能更好的开展自动化测试工作。1.1手工测试用例和自动化测试…...

编程日记 2023/2/18 17:07:49

-bash: pip: command not found

背景 这个错误的原因就是&#xff0c;我们的服务器上没有安装pip&#xff0c;装上就可以了&#xff0c;下面我们看一下centos中的解决方案 下载 wget https://bootstrap.pypa.io/get-pip.py 下载完成后如下图&#xff1a; 安装 安装的时候首先需要看一下自己的python是什…...

编程日记 2023/2/18 17:06:41

使用HTTP隧道代理，请求超过频率要怎么办？

在网上&#xff0c;经常会看到有人说使用隧道代理经常遇到429错误&#xff08;请求超过频率&#xff09;&#xff0c;我们要如何解决这一问题呢&#xff1f;通常情况&#xff0c;优质的HTTP代理厂商隧道代理服务器采用的是高性能主机构建的动态IP代理服务器&#xff0c;是可以支…...

编程日记 2023/2/18 17:05:34

paddle 49 ODConv的可部署调整

ODConv是一种适用于轻量化模型的conv结构，可以在较少的参数下训练出多参数模型才能达到的精度，在相同的flop下可以稳定的涨2-3%个点。但是在paddle下部署ODConv动态卷积模型时会报出各种异常，导致模型无法转静态图或onnx格式（可能在pytorch下也是无法转换的）。为此研究ODC…...

编程日记 2023/2/18 17:04:24

手工艺品网站建设/产品软文撰写

list的介绍 list的底层是双向带头链表&#xff0c;相对其他容器&#xff0c;list容器不支持随机访问节点&#xff0c;访问list容器的节点都是O(n)级别,但是插入删除都是O(1)级别。 list的迭代器使用 list的跟其他的容器的迭代器实现不同&#xff0c;类似vector容器的迭代器是…...

编程日记 2024/11/5 13:25:57

我想找个郑州做网站的/免费域名注册

一、源码安装 1、下载nginx源码包 curl -O https://nginx.org/download/nginx-1.12.2.tar.gz 2、安装nginx所需的依赖&#xff1a; zip模块需要 zlib 库 ​ rewrite模块需要 pcre 库 ​ ssl 功能需要openssl库 yum -y install gcc* pcre pcre-devel zlib zlib-devel o…...

编程日记 2024/11/5 10:18:56

温州建设网站/汽油价格最新调整最新消息

一、Dubbo介绍 1、dubbo 是什么 Dubbo是一个分布式服务框架&#xff0c;以及SOA治理方案。其功能主要包括&#xff1a;高性能NIO通讯及多协议集成&#xff0c;服务动态寻址与路由&#xff0c;软负载均衡与容错&#xff0c;依赖分析与降级等。 Dubbo是Alibaba开源的分布式服务…...

编程日记 2024/11/5 8:42:07

网站如何做关键词优化/杭州网站优化推荐

remote-control 可以让用户通过外部接口控制应用程序音乐, 官方建议的做法是在View显示的时候接收remote-control事件 [c-sharp] view plaincopy - (void)viewDidAppear:(BOOL)animated { [super viewDidAppear:animated]; [[UIApplication sharedApplication…...

编程日记 2024/11/5 7:23:34

jsp企业网站开发前期报告/新浪舆情通

58 同城 iOS 客户端搜索模块组件化实践- http://blog.csdn.net/csdnnews/article/details/78088447 最受欢迎的开源项目资讯&#xff08;iOS&#xff09;- http://www.csdn.net/tag/%E6%9C%80%E5%8F%97%E6%AC%A2%E8%BF%8E%E7%9A%84%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE/new…...

编程日记 2024/11/5 4:12:23

做网站电话销售/关键字查找

http://blog.csdn.net/sfbirp/archive/2010/05/19/5609725.aspx转载于:https://www.cnblogs.com/Rising/archive/2010/06/28/1766795.html...

编程日记 2024/11/5 1:41:57