vue3微信公众号商城项目实战系列（1）开发环境准备

桃桃的胖猫 發表於 2023-4-13 17:53:00

vue3微信公众号商城项目实战系列（1）开发环境准备

项目忙完，这次上新，写一个前端系列，采用vue3来开发一个微信公众号商城。
前言：
1. 微信公众号商城本质也是一个网站，由一个个网页组成，只不过这些网页运行在手机端，能响应手指的点击、长按、拖拽等操作。
2. 既然是网页，当然可以用3件套（js+html+css）来写，但象vue这样的前端框架比3件套更高效，或者现实一点说，会一个前端框架找工作会有利很多。
3. 目前流行的前端框架有 Angular、React、Vue（按首字母排序），各有优劣，笔者喜欢用Vue，Vue的主流版本有Vue2和Vue3 ，本系列用的是Vue3。
4.Vue3 可用 javascript(弱类型) 或 typescript(强类型) 做脚本语言，本系列用 javascript 。
5. Vue3官网地址：https://cn.vuejs.org/ 上面有详细的文档，可以对照一步步学习，本系列所有的编码方式都以官方推荐的为标准，不走野路子。 
6. Vue3的开发工具官方推荐 vscode，见下图，官方下载链接：https://code.visualstudio.com/ ，安装好后安装Volar插件对编码更友好。
<img src="https://img2023.cnblogs.com/blog/2186273/202304/2186273-20230413173932206-1417092465.png">
7. 开发vue3项目时，在开发环境运行需要安装 nodejs，官网地址及安装步骤如下，项目开发完成编译后的代码部署到服务器时不需要在服务器上安装nodejs ，
也就是说Web服务器不需要安装任何其他软件就可以运行编译后的Vue3代码，原因后面再具体讲。
<img src="https://img2023.cnblogs.com/blog/2186273/202304/2186273-20230413161001180-1020963481.png">
 点击LTS（Long Term Support长期支持）版本开始下载，如下图：
<img src="https://img2023.cnblogs.com/blog/2186273/202304/2186273-20230413161036266-1935259030.png">
下载之后双击开始安装，一直点"Next"按钮就可以了，如下图：
<img src="https://img2023.cnblogs.com/blog/2186273/202304/2186273-20230413161042617-763989833.png">
<img src="https://img2023.cnblogs.com/blog/2186273/202304/2186273-20230413161049134-831202474.png">
<img src="https://img2023.cnblogs.com/blog/2186273/202304/2186273-20230413161055847-791303764.png">
安装完成后在本机目录可以看到安装后的文件，如下图：
 <img src="https://img2023.cnblogs.com/blog/2186273/202304/2186273-20230413161249029-573081003.png">
<img src="https://img2023.cnblogs.com/blog/2186273/202304/2186273-20230413161259110-1620505006.png">
在地址栏输入"cmd"后回车，快速打开命令窗口：
<img src="https://img2023.cnblogs.com/blog/2186273/202304/2186273-20230413161322963-773487506.png">
此时的命令行路径指向nodejs所在的目录（避免了输入cd命令切换目录的繁琐），见下图：
<img src="https://img2023.cnblogs.com/blog/2186273/202304/2186273-20230413161332148-1806460807.png">
分别输入 "node -v" 和 "npm -v" 查看版本，见下图：
<img src="https://img2023.cnblogs.com/blog/2186273/202304/2186273-20230413161338209-169040781.png">
最后，什么是nodejs？
nodejs是一个 javascript 运行环境，如果没有这个环境，js只能在浏览器上被执行，
更重要的是， nodejs让javascript成为和PHP、Python等一样强大的服务端语言，可以用来写web程序。 
在上图中，我们还看到了 npm 指令，npm又是什么呢？
npm全称为Node Package Manager，它是nodejs的包管理工具。
在nodejs环境下运行的vue3程序，会用到各种各样的js包，基本上我们需要用到的功能都有对应的js包（传说有超过 60 万个，每周下载约 30 亿次），
所有这些js包都是由npm管理，当我们需要引用的时候，在命令行窗口输入规定格式的指令（这个指令的名称就叫npm）后按下回车键就可以下载到本地，
然后在文件中用import关键字导入就可以使用了（后面会有详细介绍），非常方便。除此之外，npm指令还可以启动开发环境下的web服务器，编译vue3源代码等等，
常用的指令有如下3个：
<table border="0">
<tbody>
<tr>
<td>指令</td>
<td>作用</td>
<td>备注</td>

</tr>
<tr>
<td>npm install  包名</td>
<td>安装对应的js包</td>
<td>该指令需要在项目的根目录下执行</td>

</tr>
<tr>
<td>npm run dev</td>
<td>启动web服务器</td>
<td>同上</td>

</tr>
<tr>
<td>npm run build</td>
<td>编译项目</td>
<td>同上</td>

</tr>

</tbody>

</table>
至此，我们的vue3开发环境就搭建起来了。
 

</div>
<div id="MySignature" role="contentinfo">
<div>作者：屏风马</div>
<div>出处：http://www.cnblogs.com/pfm33/</div>
<div>本文版权归作者和博客园共有，转载请注明原文链接和出处。 </div> 
来源：https://www.cnblogs.com/pfm33/p/17315202.html

頁: [1]

琼殿技术论坛's Archiver

vue3微信公众号商城项目实战系列（1）开发环境准备