今天，接着上一篇文章尽量选择一个人能干的互联网小生意继续展开讲解。上一季我提供一个概念就是程序员的发展路径应该是代码->功能->产品->商品
透视互联网公司的结构，依次为代码->功能->产品->商品。 不同的分工在为不同的阶段负责。 且大多数人并不知道也不清楚其他阶段贡献人的能力和价值。
比如程序员这个工种， 不管你是初级，高级，资深，架构。如果你所产生的价值只是在代码到功能阶段。 那么你的命运就不可能在自己手中。
在当今大环境日益严峻的情况下，相信很多人已经觉醒。 并想着打通任督二脉，实现副业收入，寻找第二增长曲线。
那么今天，这篇文章的价值就是帮助大家跨出第一步！
从搭建一个产品的官网出发，向这个社会输出自己的价值!
接下来，将以作者的网站www.jeecgflow.com为例，讲解如何构建一个官网网站。
搭建前端环境
安装node.js
如果你的电脑未安装node.js，请先安装
查看node版本
node -v
查看npm版本
npm -v
安装全局pnpm
npm install pnpm -g
查看版本
pnpm -v
可以直接安装最新版
安装vue3脚手架
//安装vue3脚手架
npm install -g @vue/cli
//卸载Vue3脚手架
npm uninstall @vue/cli -g
//安装vite脚手架
npm install vite –g
//如果上条命令出现报错，npm ERR! arg Argument starts with non-ascii dash, this is probably invalid: –g//则修改成下面
npm install vite g
创建vue3项目
选择一个目录，比如 cd /home/project
npm init vite@latest <项目名称> -- --template vue
//构建完成后进入项目，执行如下命令
npm install
npm run dev
//就可以看到成功的页面。
使用npm run dev所看到的运行效果
通过vscode打开，所看到的代码结构
- 集成TypeScript，进行上面创建的项目的所在的路径，执行如下命令。
npm init vite <project_name>
选择vue
选择ts
此时会看到项目多了一个tsconfig.json配置文件，说明已经集成ts
集成element-plus
ElementUI是由饿了么推出的前端组件库， 因其清爽的设计风格。 受到广泛的应用。这里记录一下vue3框架如何整合ElementUI 以提升开发效率。Element-plus官网
npm install element-plus --save
- main.ts配置
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//这个是element-plus全局配置
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import * as ELIcons from '@element-plus/icons-vue';
//这个是element-plus的图标配置
const app = createApp(App);
for (const name in ELIcons) {
app.component(name, (ELIcons as any)[name]);
}
app.use(ElementPlus,{ locale: zhCn, }).mount('#app')
完成上述操作，项目就可以调用element-plus相关组件和图标。
集成router
router是用于页面导航，也是前端项目必须要安装的重要组件。
//cd切换到项目所在的目录
npm install vue-router@4
或
npm install vue-router@next
main.ts全局注册
import { createApp } from 'vue'
// 这个style.css是项目生成自带， 会干扰element-plus组件样式，建议删除
import './style.css'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
import CitySelect from '../components/CitySelect.vue'
import NotFound from '../components/NotFound.vue'
const routes = [
{
path: '/',
name:'HelloWorld',
component: HelloWorld
},
{
//找不到匹配路由的 Path Match,另外这里使用的是 webHistory mode，URL 没有 # 了。
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: NotFound
},
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
router命令相关用法
1.导入useRouter函数
import { useRouter } from "vue-router";
2.在进入setup函数时执行
const router = useRouter()
3.在setup函数中进行路由跳转
router.push('/lowcode/project/codeManagement')
--在template页面中进行跳转--
<router-link to="/user/123">user</router-link>
--在script代码看中实现跳转的方式--
router.push('home') // 字符串
router.push({ path: 'home' }) // 对象
router.push({ name: 'user', params: { userId: '123' }})// 命名的路由
router.push({ path: 'register', query: { userId: '123' }})// 带查询参数，变成 /register?userId=123
--接受页面的处理逻辑--
//首先在setup中定义
const route = useRoute()
//query
let userId=route.query.userId;
//params
let userId=route.params.userId;
更多详情请查看router集成
集成Pinia
Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态 Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案。
// 安装
npm i -S pinia
//数据持久化插件
npm i -S pinia-plugin-persist
在src下建立store文件夹,并创建index.ts
import { createPinia } from "pinia"
import piniaPluginPersist from "pinia-plugin-persist"
const store = createPinia()
store.use(piniaPluginPersist)
export default store
path别名设置
未配置的情况写法如下:
import router from './router'
我们期望
import router from '@/router'
这样写的好处就是当文件比较深的情况下。不需要../../这种方式进行寻址。
安装命令
npm install @types/node --save-dev
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//以下两行代码是配置
import path from 'path'
const resolve = (dir:string) => path.resolve(__dirname, dir)
export default defineConfig({
plugins: [vue()],
resolve:{
//这里是别名的映射规则
alias:{
'@': resolve('src'),
'@components': resolve('src/components'),
'@api': resolve('src/api')
}
}
})
ElementPlus布局容器Container不生效
在进行页面的开发过程中， 严重建议使用element-plus的布局容器。因为自己写布局，兼容性不好且耗费时间久。如果遇到布局容器不生效。请做以下检查。
import { createApp } from 'vue'
//将style.css去掉。就可以正常显示啦。
// import './style.css'
import App from './App.vue'
import router from '@/router'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn'
createApp(App).use(router).use(Antd).use(ElementPlus,{ locale }).mount('#app')
请将自带的style.css删除掉
