详解从零搭建vue2 vue-router2 webpack3工程

以新手视角，详细介绍各个步骤内容，不深入讲步骤涉及的原理，主要介绍如何操作。初始化工程新建工程目录vue2practice，在目录下执行npm init -y来创建一个package.json，在package.json中先添加以下必备模块： { "name": "vue2-vue-router2-webpack3", "version": "1.0.0", "devDependencies": { "vue": "^2.4.2", "vue-loader": "^13.0.2", "vue-router": "^2.7.0", "vue-template- 【详解从零搭建Vue2 Vue-Router2 Webpack3工程】在本文中，我们将逐步指导新手如何从零开始构建一个基于Vue2、Vue-Router2和Webpack3的前端开发环境。这个过程涵盖了初始化工程、安装依赖、配置Webpack、创建Vue组件以及设置Vue-Router。 **初始化工程**你需要创建一个新的项目目录，例如`vue2practice`。进入该目录，通过`npm init -y`快速生成一个`package.json`文件。在这个文件中，我们将添加必要的依赖项，包括Vue、Vue-Loader、Vue-Router和Webpack等。具体如下： ```json { "name": "vue2-vue-router2-webpack3", "version": "1.0.0", "devDependencies": { "vue": "^2.4.2", "vue-loader": "^13.0.2", "vue-router": "^2.7.0", "vue-template-compiler": "^2.4.2", "webpack": "^3.4.1", "webpack-dev-server": "^2.6.1" } } ```注意，`vue-template-compiler`是`vue-loader`的`peerDependencies`，但不会自动安装。这是因为作者希望用户自己指定与Vue相同版本的`vue-template-compiler`，以确保兼容性。如果版本不匹配，可能会导致运行时错误。 **新建目录结构**接下来，我们需要创建项目的基本目录结构，包括`index.html`、`webpack.config.js`、`src`、`views`、`main.js`、`router.js`和`app.vue`。每个文件和目录都有其特定作用： - `index.html`：作为项目的启动页面。 - `webpack.config.js`：配置Webpack的入口。 - `src`：存放项目源代码。 - `views`：存放Vue组件。 - `main.js`：项目的入口文件，用于挂载Vue实例。 - `router.js`：Vue-Router的配置文件。 - `app.vue`：工程的首页组件。 **配置Webpack** Webpack的核心配置在于`webpack.config.js`。你需要定义`entry`（入口文件）、`output`（输出设置）以及其他可选配置。例如： ```javascript module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), publicPath: '/static/', filename: 'build.js' } }; ``` `output.path`必须设置为绝对路径，以满足Webpack2+的要求。 **配置webpack-dev-server**在`package.json`中，我们添加一个启动开发服务器的脚本，如`"dev": "webpack-dev-server --hot --open"`。这将开启一个带有热模块替换功能的服务器，并在修改代码后自动刷新页面。 **验证配置**在`index.html`中引入`build.js`，并写入测试代码。在`main.js`中添加相应的JavaScript，然后运行`npm install`安装依赖，最后执行`npm run dev`启动开发服务器。如果一切正常，浏览器会自动打开一个新页面，显示测试内容，且在修改`main.js`后无需刷新就能看到变化。 **新建Vue页面**在`views`目录下创建`index.vue`，编写一个简单的Vue组件。这个组件使用ES6语法和Vue的模板语法： ```vue 这是{{page}}页面 export default { data() { return { page: 'index' }; } }; ```在Webpack 2及更高版本中，ES6的import/export语法是支持的，但仍需要配置Loader来处理其他ES6的新特性。在没有配置之前，不要尝试使用这些新特性，以避免编译错误。通过以上步骤，你已经成功地从零搭建了一个基础的Vue2、Vue-Router2和Webpack3项目。后续你可以继续扩展项目，添加更多Vue组件，配置路由，以及根据需求调整Webpack的配置，实现更复杂的功能。