从产品到商品第一步建立宣传网站|干货分享

62 阅读5分钟

今天,接着上一篇文章尽量选择一个人能干的互联网小生意继续展开讲解。上一季我提供一个概念就是程序员的发展路径应该是代码->功能->产品->商品

WX20240812-102906@2x.png 透视互联网公司的结构,依次为代码->功能->产品->商品。 不同的分工在为不同的阶段负责。 且大多数人并不知道也不清楚其他阶段贡献人的能力和价值。

比如程序员这个工种, 不管你是初级,高级,资深,架构。如果你所产生的价值只是在代码到功能阶段。 那么你的命运就不可能在自己手中。

在当今大环境日益严峻的情况下,相信很多人已经觉醒。 并想着打通任督二脉,实现副业收入,寻找第二增长曲线。

那么今天,这篇文章的价值就是帮助大家跨出第一步!
从搭建一个产品的官网出发,向这个社会输出自己的价值!

WX20240812-110610@2x.png

接下来,将以作者的网站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
//就可以看到成功的页面。

WX20240813-101859@2x.png

使用npm run dev所看到的运行效果

WX20240813-101955@2x.png

通过vscode打开,所看到的代码结构

  • 集成TypeScript,进行上面创建的项目的所在的路径,执行如下命令。
npm init vite <project_name>

WX20240813-102240@2x.png

选择vue

WX20240813-102252@2x.png

选择ts

WX20240813-102301@2x.png

此时会看到项目多了一个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删除掉