从零开始配置一个Vue项目（Vue项目安装配置教程）

一、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 -vnode -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 项目首先建立一个项目存放文件夹例如在 C 盘下新建VueWorkspace文件夹通过 DOS 命令进入该文件夹cd C:\VueWorkspace输入以下命令创建项目vue01为项目名称可随意更改vue create vue01命令执行后会出现交互式选择界面通过键盘上下箭头选择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 原型上方便全局调用importaxiosfromaxios;Vue.prototype.$axiosaxios;由于前端项目与后端服务通常不在同一个端口浏览器会触发跨域限制因此还需要在后端添加跨域配置。新建一个配置类实现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-router3.5.4安装完成后在src文件夹下新建router目录并在其中创建index.js文件写入以下内容importVueRouterfromvue-router;constroutes[{path:/,name:login,component:()import(../components/IndexMain)}];constrouternewVueRouter({mode:history,routes});exportdefaultrouter;八、配置 main.js替换原有内容main.js是 Vue 项目的入口文件所有全局配置都在这里完成。将原有内容整体替换为以下代码importVuefromvueimportAppfrom./App.vueimportElementUIfromelement-ui;importelement-ui/lib/theme-chalk/index.css;import./assets/global.css;// 自定义的 CSSimportaxiosfromaxios;importVueRouterfromvue-router;importrouterfrom/router;Vue.prototype.$axiosaxios;Vue.prototype.$httpUrlhttp://localhost:8090/shop;// 后台地址Vue.config.productionTipfalseVue.use(VueRouter);Vue.use(ElementUI,{size:small});// vue 界面字体设置newVue({router,render:hh(App),}).$mount(#app)九、将项目导入 IDEA 并配置 npm 启动项为了方便在开发过程中一键启动项目可以将 Vue 项目导入 IDEA 中并配置 npm 启动项打开 IDEA选择File→Open选中VueWorkspace下的vue01项目文件夹导入点击右上角运行配置下拉框选择Edit Configurations点击左上角号选择npm类型在配置面板中package.json选择项目根目录下的package.json文件scripts选择serve点击OK保存之后即可通过 IDEA 右上角的运行按钮一键启动项目。注意事项所有的 DOS 命令最好都以管理员权限运行否则可能出现文件夹权限访问受限的问题安装依赖时如果速度过慢请确认第四步的 npm 镜像源是否配置成功如果vue create创建项目时卡住可尝试关闭代理或更换网络环境后重试。如需要完整的项目文件可私信我