StarBlog博客Vue前端开发笔记：(1)准备篇
<h2 id="前言">前言</h2><p>之前在【基于.NetCore 开发博客项目 StarBlog - (32) 第一期完结】里说到 StarBlog 的 Vue 前端系列已经写好了</p>
<p>本来打算后面再发的，不过最近有点懒没去写新的文章 😂 还是整理一些老文发出来吧~</p>
<blockquote>
<p>PS：这个系列的文章最后编辑于 2023 年 6 月</p>
</blockquote>
<p>本公众号开通了付费文章的功能，我打算在这个 StarBlog Vue 系列上开始尝试一下。不想付费也没关系，您可以在我的博客上完整阅读本系列的全部文章~</p>
<p>如果有同学觉得我的文章有帮助，可以在公众号付费支持一下，一点不起眼的鼓励都是对创作者莫大的鼓励！</p>
<p>另外再碎碎念一下~</p>
<p>对于创作变现，我一直没有明确的规划，运营公众号和博客纯粹是作为兴趣爱好，以及作为日常学习的记录。</p>
<p>之前我也一直缺乏完全转型的决心，但在如今大环境寒冬的背景下，行业形势愈发严峻，也许还得等很久，才能迎来下一轮经济爆发期。</p>
<p>所以我建议各位程序员朋友，即使目前有稳定的收入，也应该居安思危，尝试拓展一下副业，多一种选择也多一种未来的可能。</p>
<p>如今的付费文章只能算在初步摸索，接下来我会尝试更多的“商业模式”，不打工是每个打工人的终极梦想，毕竟理想总要有的嘛，万一实现了呢？😃</p>
<h2 id="本系列内容规划">本系列内容规划</h2>
<p>本系列的写作背景是从零开始边学边用 Vue 开发一套博客的管理后台，写作视角是 Vue 的初学者，所以挺适合刚入门的同学阅读。</p>
<p>整个项目已经开源，搭配源码阅读的话效果更佳: https://github.com/Deali-Axy/StarBlog-Admin</p>
<p>内容覆盖到 StarBlog 博客的后台功能，包括：</p>
<ul>
<li>页面路由</li>
<li>SASS 与 SCSS</li>
<li>第三方图标库的使用</li>
<li>网络通信</li>
<li>登录页面编写</li>
<li>主页面（使用 Vue 实现多标签页）</li>
<li>状态管理与 Vuex</li>
<li>vue-router 路由</li>
<li>常见页面布局（Grid、Flex、瀑布流等）</li>
<li>常用交互功能（文件上传、弹窗）</li>
<li>富文本编辑器</li>
<li>第三方组件库使用（主要是 ElementUI）</li>
<li>可视化大屏开发</li>
<li>常见问题与解决</li>
<li>扩展学习资料</li>
</ul>
<p>本项目的技术不是最新的，不过实现的功能覆盖到管理后台常见的功能需求。</p>
<p>比起各种高大上的模板，本系列更侧重于一步步学习，并且在学习中举一反三。</p>
<p>最终把管理后台这个开发场景随便拿捏 😎</p>
<h2 id="环境准备">环境准备</h2>
<p>说了这么多，终于开始正题了，本文的内容很简单，就是安装环境和创建项目。</p>
<h3 id="nodejs">NodeJs</h3>
<p>现代前端开发讲究工程化，万物基于 Nodejs 这个 JavaScript 运行环境</p>
<h3 id="入门版">入门版</h3>
<p>首先需要安装 NodeJs</p>
<p>最简单的方式是在官网下载安装</p>
<p>下载地址: http://nodejs.cn/download/</p>
<h3 id="进阶版">进阶版</h3>
<p>使用 NVM 管理 Nodejs 环境是更好的选择，可以安装多个版本，随时能切换，方便得很。</p>
<p>在 Windows 平台开发的话，如果搭配 scoop 之类的包管理器，体验更好。</p>
<p>详情见我今年春节后开工发的文章:</p>
<ul>
<li>2024 年，提升 Windows 开发和使用体验的一些实践 - 包管理器篇</li>
<li>2024 年，提升 Windows 开发和使用体验实践 - 终端&命令行篇</li>
</ul>
<p>关于 NVM 的使用不是本文的重点，请参考 NVM 官网: https://github.com/nvm-sh/nvm</p>
<h3 id="安装前端工具链">安装前端工具链</h3>
<p>国内使用 NPM 需要设置国内镜像才能正常安装，之前常用的淘宝镜像说是要停止解析了，可以用这个 <strong>npmmirror 中国镜像</strong>，命令如下：</p>
<pre><code class="language-bash">npm config set registry https://registry.npmmirror.com
</code></pre>
<p>npmmirror 中国镜像站官网：https://npmmirror.com/</p>
<p>更多配置国内镜像的内容可以参考我之前的博客：https://mp.weixin.qq.com/s/TQt7r-xyphy2KfrOvg2OBA</p>
<h4 id="安装-webpack">安装 webpack</h4>
<p>新版本的脚手架都是内置的了，不过 StarBlog 用的 Vue 比较老… 需要自己安装</p>
<pre><code class="language-bash">npm install -g webpack
</code></pre>
<h4 id="安装-vue-cli">安装 vue-cli</h4>
<p>Vue 项目必须安装这个脚手架</p>
<p>前端组件必须特别注意版本，很多奇奇怪怪的问题都是版本不兼容导致的</p>
<p>具体到本项目，使用的 vue 版本是 2.5.2</p>
<pre><code class="language-bash">npm install -g vue-cli
</code></pre>
<h4 id="安装-yarn">安装 yarn</h4>
<p>Yarn 是 Facebook 发布的 node.js 包管理器，比 npm 更快、更高效，可以使用 Yarn 替代 npm。</p>
<p>关于 yarn 我在之前的这篇博客里有提到: 代码使我头疼之 React 初学习</p>
<p>安装命令</p>
<pre><code class="language-bash">npm install -g yarn
</code></pre>
<p>设置国内镜像，跟 NPM 的操作一样</p>
<pre><code class="language-bash">yarn config set registry https://registry.npmmirror.com
</code></pre>
<blockquote>
<p>PS：顺便提一嘴，我现在用 pnpm 更多，感觉是更好的选择，不过新手还是用 yarn 吧，简单好用，pnpm 还是有一些坑的，这里就不展开了~</p>
</blockquote>
<h2 id="创建项目">创建项目</h2>
<p>使用 <code>vue-cli</code> 来创建项目</p>
<pre><code class="language-bash">vue init webpack starblog-admin-ui
</code></pre>
<p>然后会问一堆信息，我是这样填的：</p>
<pre><code class="language-bash">> vue init webpack starblog-admin-ui
? Project name: starblog-admin-ui
? Project description: Admin dashboard of StarBlog
? Author: DealiAxy <dealiaxy@gmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests: No
? Pick a test runner: noTest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) yarn
</code></pre>
<p>最后一步可以选 <code>Yes use npm</code> 和 <code>Yes use yarn</code>，毫无疑问我选了 yarn，然后回车</p>
<pre><code class="language-bash"># Project initialization finished!
# ========================
To get started:
cd starblog-admin-ui
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
</code></pre>
<p>搞定！<code>vue-cli</code> 很贴心，帮我们把依赖也安装好了~</p>
<h2 id="运行测试">运行测试</h2>
<p>自动生成项目的目录结构如下</p>
<pre><code class="language-bash">starblog-admin-ui
├── build
├── config
├── node_modules
├── src
├── static
├── test
├── README.md
├── index.html
├── package.json
└── yarn.lock
</code></pre>
<blockquote>
<p>另外提一点，Windows 的 <code>tree</code> 命令不支持定义要显示的目录层级，这里我选择了基于 Node 的 <code>tree-node-cli</code> 工具</p>
<p>只需要 <code>npm install -g tree-node-cli</code> 即可</p>
<p>要实现以上的效果，命令是：<code>treee -L 1</code></p>
</blockquote>
<p>切换到项目目录下，执行命令</p>
<pre><code class="language-bash">yarn run dev
</code></pre>
<p>提示</p>
<pre><code class="language-bash"> DONECompiled successfully in 2301ms
IYour application is running here: http://localhost:8080
</code></pre>
<p>OK，打开浏览器测试一切正常~ （截图我就不放了）</p>
<h2 id="安装-elementui">安装 ElementUI</h2>
<p>vue 的 UI 好像不是很多，先选这个 elementUI 吧，后续再看看</p>
<p>话不多说</p>
<p>官网文档：https://element.eleme.cn/#/zh-CN/component/installation</p>
<h3 id="安装依赖">安装依赖</h3>
<p>直接命令</p>
<pre><code class="language-bash">yarn add element-ui
</code></pre>
<h3 id="导入项目">导入项目</h3>
<p>修改 <code>src/main.js</code> 文件</p>
<p>原本长这样</p>
<pre><code class="language-js">import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {App},
template: '<App/>'
})
</code></pre>
<p>添加了 ElementUI 之后长这样</p>
<pre><code class="language-js">import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {App},
template: '<App/>'
})
</code></pre>
<p>OK 然后打开默认的页面，<code>src/components/HelloWorld.vue</code></p>
<p>随便找个地方添加一个 elementUI 的按钮</p>
<pre><code class="language-html"><el-button type="primary">按钮</el-button>
</code></pre>
<p>然后打开浏览器测试一下，能看到按钮就是引入 ElementUI 成功了~</p>
<p>准备篇到这就收工啦。</p>
</div>
<div id="MySignature" role="contentinfo">
微信公众号：「程序设计实验室」
专注于互联网热门新技术探索与团队敏捷开发实践，包括架构设计、机器学习与数据分析算法、移动端开发、Linux、Web前后端开发等，欢迎一起探讨技术，分享学习实践经验。<br><br>
来源：https://www.cnblogs.com/deali/p/18598366
頁:
[1]