Window 环境在 NodeJS 配置 Vue 环境及项目运行（IDEA版）

最新推荐文章于 2025-09-02 11:14:08 发布

原创最新推荐文章于 2025-09-02 11:14:08 发布 · 426 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#NodeJS #Vue

Vue 同时被 2 个专栏收录

3 篇文章

订阅专栏

NodeJS

2 篇文章

订阅专栏

本文详细介绍如何使用NodeJS环境及cnpm安装vue-cli，创建并配置基于webpack模板的Vue.js项目，包括安装依赖、运行项目、使用Webpack进行模块打包，以及安装和配置vue-router实现页面路由。

检测 NodeJS 环境及 cnpm

安装 vue-cli

# 安装 vue-cli
cnpm install vue-cli -g

# 测试是否成功
# 查看可以基于哪些模板创建 vue 应用程序，通常我们选择 webpack
vue list

第一个 vue-cli 应用程序

创建一个 vue 项目，并使用管理员模式在 DOS 窗口进入该目录
创建一个基于 webpack 模板的 vue 应用程序
# 这里的 myvue 是项目名称,可以根据自己的需求起名
vue init webpack myvue

初始化并运行

# 进入到vue项目目录
cd myvue

# 安装依赖
npm install

# 运行项目
npm run dev

安装依赖
运行项目

在 IDEA Open 项目

使用 IDEA 方便我们查看项目结构

安装 Webpack

Webpack 是一款模块加载兼打包工具，它能把各种资源，如：JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用
# 安装
npm install webpack -g
npm install webpack-cli -g
# 测试安装
webpack -v
webpack-cli -v

使用Webpack

IDEA Open 一个空项目
创建要给名为 modules 的目录，用于放置 JS 模块等资源文件
在 modules 下创建模块文件，如：hello.js，用于编写 JS 模块相关代码
// 暴露一个方法
exports.sayHi = function () {
    document.write("<h1>FutureLL, ES6 规范</h1>");
};
在 modules 下创建一个名为 main.js 的入口文件，用于打包时设置 entry 属性
// 接收一个方法
var hello = require("./hello");
hello.sayHi();
在项目目录下创建 webpack.config.js 配置文件，使用 webpack 命令打包
module.exports = {
    entry: './modules/main.js',
    output: {
        filename: "./js/bundle.js"
    }
}
打包项目
F:\IDEA\vue\webpack-study>webpack
Hash: f3f86b22d65a2587a0b3
Version: webpack 4.43.0
Time: 344ms
Built at: 2020/06/10 上午10:37:05
         Asset   Size  Chunks             Chunk Names
./js/bundle.js  1 KiB       0  [emitted]  main
Entrypoint main = ./js/bundle.js
[0] ./modules/main.js 72 bytes {0} [built]
[1] ./modules/hello.js 110 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
完成之后发现项目多了一个 dist 目录

将打包后的包导入
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="dist/js/bundle.js"></script>

</body>
</html>
在此页面打开浏览器，查看是否输出相关内容

安装 vue-router

vue-router 是一个插件包，所以我们需要使用 cnpm/npm 来进行安装，打开命令行工具，进入项目目录，输入如下命令：
npm install vue-router --save-dev
如果在一个模块化工程中使用它，必须通过 Vue.use() 明确的安装路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

测试

删除项目中没有用的东西
src中没用的东西
在 components 目录下存放自己编写的组件
定义一个 Content.vue 和 Main.vue 的组件
安装路由，在 src 目录下，新建一个文件夹：router 专门用于存放路由
在 main.js 中配置路由
在 App.vue 中使用路由