企业官网建设流程全解析

一、Node 的安装配置

Node.js 是整个 Vue 前端开发环境的基础，它内置了 npm 包管理器，后续所有依赖（Vue CLI、Element UI、Axios、Vue Router 等）都要通过 npm 来安装，因此第一步务必把 Node 环境配置正确。

第一步：安装 Node.js（推荐 Node 16 版本）

前往 Node.js 官网下载对应操作系统的安装包，建议选择 LTS（长期支持）版本，例如 Node 16。安装时一路点击「Next」，保持默认安装路径即可（默认会安装到C:\Program Files\nodejs）。安装完成后，Node 和 npm 会自动加入系统 PATH 环境变量。

第二步：配置环境变量 NODE_PATH

为了让全局安装的 npm 包能够被正确解析，需要手动新增一个系统环境变量：

变量名：NODE_PATH 变量值：C:\Program Files\nodejs\node_global\node_modules

配置步骤：右键「此电脑」→「属性」→「高级系统设置」→「环境变量」→ 在「系统变量」中点击「新建」，填入上述变量名和变量值，点击确定保存。

第三步：通过 DOS 命令检测安装是否成功

按Win + R打开运行窗口，输入cmd回车打开命令提示符，依次输入以下两条命令：

node -v npm -v

• node -v能显示 Node 的版本号（如v16.20.2），说明 Node 安装成功；
• npm -v能显示 npm 的版本号（如8.19.4），说明 npm 安装成功。

如果提示「不是内部或外部命令」，说明环境变量未配置成功，需要重新检查 PATH 配置。

二、配置 npm 镜像源*

由于默认的 npm 官方源在国内访问较慢，建议切换为淘宝镜像源。在命令提示符中执行：

npm config set registry https://registry.npmmirror.com

配置完成后，可通过以下命令查看当前 npm 源是否生效：

npm config get registry

如果显示https://registry.npmmirror.com，说明镜像源配置成功，后续安装依赖的速度会明显提升。

三、安装 Vue CLI 脚手架**

Vue CLI 是官方提供的项目脚手架工具，用于快速创建和管理 Vue 项目。在命令提示符中执行全局安装：

npm install -g @vue/cli

安装完成后，通过以下命令检测是否安装成功：

vue -V

能显示 Vue CLI 的版本号（如@vue/cli 5.0.8），说明安装成功。

四、创建 Vue 项目

1. 首先建立一个项目存放文件夹，例如在 C 盘下新建VueWorkspace文件夹；
2. 通过 DOS 命令进入该文件夹：

cd C:\VueWorkspace

3. 输入以下命令创建项目（vue01为项目名称，可随意更改）：

vue create vue01

4. 命令执行后会出现交互式选择界面，通过键盘上下箭头选择Vue 2选项，按回车确认，即可开始创建项目。等待依赖安装完成，出现创建成功的提示界面即代表项目创建完成。

五、安装 Element UI 组件库

Element UI 是 Vue 2 生态中最常用的桌面端组件库，提供了丰富的表格、表单、弹窗等现成组件。以管理员权限打开命令提示符，通过cd命令进入项目目录，然后执行：

npm install element-ui

安装完成后，Element UI 会被写入项目的package.json依赖中，后续在main.js中全局引入即可使用。

六、安装 Axios 并配置跨域

Axios 是常用的 HTTP 请求库，用于前端与后端接口的通信。以管理员权限打开命令提示符，进入项目目录后执行：

npm install axios

安装完成后，在main.js中引入并挂载到 Vue 原型上，方便全局调用：

importaxiosfrom"axios";Vue.prototype.$axios=axios;

由于前端项目与后端服务通常不在同一个端口，浏览器会触发跨域限制，因此还需要在后端添加跨域配置。新建一个配置类，实现WebMvcConfigurer接口：

@ConfigurationpublicclassCorsConfigimplementsWebMvcConfigurer{@OverridepublicvoidaddCorsMappings(CorsRegistryregistry){registry.addMapping("/**")// 是否发送 Cookie.allowCredentials(true)// 放行哪些原始域.allowedOriginPatterns("*").allowedMethods(newString[]{"GET","POST","PUT","DELETE"}).allowedHeaders("*").exposedHeaders("*");}}

七、安装 Vue Router 并配置动态路由*

Vue Router 是 Vue 官方的路由管理器，用于实现页面之间的跳转。以管理员权限打开命令提示符，进入项目目录后执行（注意 Vue 2 项目需安装 3.x 版本）：

npm i vue-router@3.5.4

安装完成后，在src文件夹下新建router目录，并在其中创建index.js文件，写入以下内容：

importVueRouterfrom"vue-router";constroutes=[{path:'/',name:'login',component:()=>import('../components/IndexMain')}];constrouter=newVueRouter({mode:'history',routes});exportdefaultrouter;

八、配置 main.js（替换原有内容）

main.js是 Vue 项目的入口文件，所有全局配置都在这里完成。将原有内容整体替换为以下代码：

importVuefrom'vue'importAppfrom'./App.vue'importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';import'./assets/global.css';// 自定义的 CSSimportaxiosfrom"axios";importVueRouterfrom"vue-router";importrouterfrom"@/router";Vue.prototype.$axios=axios;Vue.prototype.$httpUrl='http://localhost:8090/shop';// 后台地址Vue.config.productionTip=falseVue.use(VueRouter);Vue.use(ElementUI,{size:'small'});// vue 界面字体设置newVue({router,render:h=>h(App),}).$mount('#app')

九、将项目导入 IDEA 并配置 npm 启动项

为了方便在开发过程中一键启动项目，可以将 Vue 项目导入 IDEA 中，并配置 npm 启动项：

1. 打开 IDEA，选择File→Open，选中VueWorkspace下的vue01项目文件夹导入；
2. 点击右上角运行配置下拉框，选择Edit Configurations；
3. 点击左上角+号，选择npm类型；
4. 在配置面板中，package.json选择项目根目录下的package.json文件，scripts选择serve；
5. 点击OK保存，之后即可通过 IDEA 右上角的运行按钮一键启动项目。

注意事项

• 所有的 DOS 命令最好都以管理员权限运行，否则可能出现文件夹权限访问受限的问题；
• 安装依赖时如果速度过慢，请确认第四步的 npm 镜像源是否配置成功；
• 如果vue create创建项目时卡住，可尝试关闭代理或更换网络环境后重试。
• 如需要完整的项目文件，可私信我