webpack+router+vue环境搭建

最新推荐文章于 2020-11-09 10:25:52 发布
最新推荐文章于 2020-11-09 10:25:52 发布
阅读量177 收藏
点赞数
分类专栏： webpack 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45240616/article/details/103872374
版权

初步搭建环境

npm init –y，生成package.json

npm install --save-dev webpack

--save：将保存配置信息到pacjage.json。默认为dependencies节点中。
--dev：将保存配置信息devDependencies节点中。
在这里插入图片描述

npm install webpack-cli

在这里插入图片描述

新建src目录，新建index.js文件如下
index.js内容：

console.log("hello")

package.json文件内容：

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

在这里插入图片描述

创建webpack.config.js文件，目录如上面：
内容为：

module.exports ={
    //定义一个路口,作用：编译打包js的时候，需要的路口
    entry:'./src/index.js',
    //定义开发环境
    mode:'development',

}

output:可以不写，有默认指定的路径；

TERMINAL窗口执行：npm run build 或则yarn build
结果如下：
在这里插入图片描述
此时的目录为：
在这里插入图片描述
自动生成了dist文件以及main.js

验证：
在这里插入图片描述

打包js的同时，html也跟着打包出去

此时需要安装工具html-webpack-plugin
安装命令：

yarn add -D html-webpack-plugin

注释：—D是开发者的辅助方面有关
或则

npm install html-webpack-plugin

安装成功后，package.json出现如下：
在这里插入图片描述
配置html输出
webpack.config.js：

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports ={
    //定义一个路口,作用：编译打包js的时候，需要的路口
    entry:'./src/index.js',
    //定义开发环境
    mode:'development',
    //plugins配置项
    plugins:[
        new HtmlWebpackPlugin({
            
        })
    ]

}

执行npm run build
在这里插入图片描述
目录生成了html
在这里插入图片描述
用浏览器打开html
在这里插入图片描述
此时html自动生成的内容为：
在这里插入图片描述

配置Vue相关

安装vue

yarn add vue 或则 npm install vue

在这里插入图片描述
引入Vue：
Index.js:

import Vue from 'vue'

console.log("hello")可以去掉了
new Vue({
    el:"#app",
    template:'<h1>Hello World</h1>'
})

Dist目录下的index.html加上如下：
在这里插入图片描述
然后npm run build

此时发现：
在这里插入图片描述
自己添加的内容消失了

此时需要这样的配置

Src目录下创建新的index.html
在这里插入图片描述
Index。Html的内容为

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
      <div id="app"></div>
  </body>
</html>

同时配置webpack.config.js

  resolve:{
        alias:{
            'vue$':'vue/dist/vue.esm.js'
        }
    },
    //plugins配置项
    plugins:[
        new HtmlWebpackPlugin({
            template:"./src/index.html"
        })
    ]

再次执行npm run build

此时的dist目录下的index.html内添加了：
在这里插入图片描述
浏览器：
在这里插入图片描述
热部署

从上面的过程中发现，每次修改完文件，都要执行一次npm run build；很麻烦！！！！！！

就需要安装开发环境的一个工具：
yarn add –D webpack-dev-server或则npm install -dev-save webpack-dev-server
在这里插入图片描述
webpack.config.js文件添加如下:

其中-Chrome为谷歌浏览器打开
在这里插入图片描述

 "dev": "webpack-dev-server --open chrome --config webpack.config.js",

然后可以在控制器执行npm run dev 或则yarn dev
在这里插入图片描述Npm执行后会打开浏览器！！！！！（亲测），yarn不知道会不会自动打开！！

此时就是热部署配置了，，当修改代码后，保存后，则浏览器自动展示最新的内容！

引入样式CSS

新建index.css
在这里插入图片描述

代码：

.header{
    background-color: cornflowerblue;
    color: white;
}

Index.js文件添加如下
在这里插入图片描述

此时：
在这里插入图片描述
报错：
解决方案：
Crit+C结束进程；
然后安装插件
Yarn add –D style-loader css-loader或则 npm install -dev-save style-loader css-loader

webpack.config.js配置
在这里插入图片描述

Npm run dev

结果如下：
在这里插入图片描述

若样式的文件类型不是.css结尾的，而是.less结尾时：

练习如下

将index.css文件修改为index.less文件！
然后修改src目录下的index.js文件代码

import './index.css'
import './index.less'

webpack.config.js的配置
在这里插入图片描述

同时安装less-loader
npm install -dev-save less-loader或则yarn add –D less-loader
npm install -dev-save less或则yarn add –D less

执行yarn dev
在这里插入图片描述

而上面的并不是.less文件的正确用法，正确用法为：
修改index.less文件的内容为：
在这里插入图片描述
同时在src目录下创建base.less文件，内容为：
在这里插入图片描述
运行npm run dev

修改base.less文件的内容为：

@primary-color: red;

此时页面变为：
在这里插入图片描述

引入vue-router

yarn add vue-router或则 npm install vue-router

Index.js文件内容添加

import VueRouter from 'vue-router'

再添加：

import Vue from 'vue'
import VueRouter from 'vue-router'
import './index.less'

const MainMenu = {
    template:`
        <div>
            <router-link to="/">Home</router-link>
            <router-link to="/products">products</router-link>
            <router-link to="/about">about</router-link>
        </div>
`

}
const Home = {
    template:`
        <h1>Home</h1>
    `
}
const Products = {
    template:`
        <h1>Products</h1>
    `
}
const About = {
    template:`
        <h1>About</h1>
    `
}

const router = new VueRouter({
    mode:'history',
    routes:[
        // {path:'*',components:{heng:MainMenu}},
        {path:'/',components:{default:Home,heng:MainMenu}},
        // {path:'/',component:Home},
        {path:'/products',components:{default:Products,heng:MainMenu}},
        {path:'/about',components:{default:About,heng:MainMenu}},
    ]
})

Vue.use(VueRouter);
new Vue({
    el:"#app",
    template:`
    <div>
        <router-view name="heng"></router-view>
        <router-view></router-view>
    </div>
    `,
    router,

})

此时页面显示：
在这里插入图片描述

安装express插件

但是由于添加了mode：‘history’选项 导致现在刷新网页的时候，会出现：
在这里插入图片描述
解决方案为：
创建server.js，内容为：
在这里插入图片描述

const express = require('express')
const app = express()
const port = 8080
const path = require("path")
//在dist目录找index.html文件
app.use(express.static('dist'));
app.get('*',(req,res) => {
    let indexPath = path.join(__dirname,'dist','index.html');
    res.sendFile(indexPath)
})

app.listen(port,()=>console.log(`Example app listening on port ${port}!`))

安装组件express
npm install express或则 yarn add express

然后package.json

在这里插入图片描述
然后执行 npm run build

刷新页面，，此时就没问题了！！！

文件整理

创建目录如下
在这里插入图片描述
内容分别是：
About.js:

const About = {
    template:`
        <h1>About</h1>
    `
}
export default About;

home.js:

const Home = {
    template:`
        <h1>Home</h1>
    `
}
export default Home;

products.js:

const Products = {
    template:`
        <h1>Products</h1>
    `
}

export default Products;

main-menu.js:

const MainMenu = {
    template:`
        <div>
            <router-link to="/">Home</router-link>
            <router-link to="/products">products</router-link>
            <router-link to="/about">about</router-link>
        </div>
`
}
export default MainMenu;

index.js将上面的内容删除：
同时添加几个 import
Index.js内容为：

import Vue from 'vue'
import VueRouter from 'vue-router'
import './index.less'
import Home from './pages/home'
import About from './pages/about'
import Products from './pages/products'
import MainMenu from './components/main-menu'

const router = new VueRouter({
    mode:'history',
    routes:[
        // {path:'*',components:{heng:MainMenu}},
        {path:'/',components:{default:Home,heng:MainMenu}},
        // {path:'/',component:Home},
        {path:'/products',components:{default:Products,heng:MainMenu}},
        {path:'/about',components:{default:About,heng:MainMenu}},
    ]
})

Vue.use(VueRouter);
new Vue({
    el:"#app",
    template:`
    <div>
        <router-view name="heng"></router-view>
        <router-view></router-view>
    </div>
    `,
    router,

})

，

最后验证结果，刷新页面！！！！！！！！！！
结束！！！！！！！！！！！！！！！！！！！

李振恒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack中路由的相关用法
qq_39239110的博客
05-30 1051
1 如何在webpack中使用路由？ 1 首先在webpack项目中安装vue-router npm i vue-router -D 2 在main.js中导入vue-router 包并通过Vue.use()明确的安装路由功能 import VueRouter from 'vue-router' Vue.use(VueRouter) 3,新建几个子组件，并在main.js中导入，如创建两个组...
webpack 配置 react-router BrowserRouter
qq_39261142的博客
05-21 1496
如果使用 react-router-dom 来配置路由跳转，默认情况下只能使用 HashRouter，使用 BrowserRouter 时匹配 / 以外的路由会找不到服务而报 404 错误 这是因为 react 服务是一个单页面应用，使用 BrowserRouter 模式会向浏览器请求指定的路由资源，如访问 xxx 路由相当于请求服务端的 ~/xxx 资源，但是服务端并没有配置该路由，因此会返回 404， webpack 中的解决思路是：如果匹配不到对应路由，都返回 index.html，然后通过 js 代
React-webpack-router
qq_28091923的博客
11-15 292
webpack.config.js文件配置详解 1、 html-webpack-plugin插件 HtmlWebpackPlugin简化了HTML文件的创建，该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。 只需添加插件到你的 webpack 配置如下： var HtmlWebpackPlugin = require('html...
012 webpack中的router
weixin_30821731的博客
08-31 275
一：准备工作 1.App.vue <template> <div> <h1>这是 App 组件</h1> </div> </template> <script> </script> <style> </style>...
webpack+vue+vueRouter搭建项目
qq_43288277的博客
07-23 213
开始（确认已经安装node环境和npm包管理工具） 1、新建项目文件名为start_vuedemo 2、npm init -y 初始化项目 如图所示： 在该工程下自动生成一个package.json文件。 安装项目依赖 3、npm install --save vue 默认安装最新版vue 4、npm install --save-dev webpack webpack-dev-server 安装webpack，webpack-dev-server（是一个小型的Node.js Express服务器） 注
vue3+webpack+vue-router封装路由
05-21
vue3+webpack+vue-router封装路由，资源内容包含了vue3+webpack+vue-router，并且代码对vue-router路由进行了封装，资源下载下来之后项目代码需要先：npm install，之后就可以运行启动项目了，代码结构清晰，没有...
vue3+webpack+vue-router路由封装+axios封装+vuex封装
05-23
vue3+webpack+vue-router路由封装+axios封装+vuex封装，下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码，分别对vue-router路由进行了封装，对axios进行了封装，对vuex进行了封装，...
Vue+Webpack+Vue路由器+vue资源.rar
最新发布
05-15
总结来说，这个项目提供了一个基于Vue.js、Webpack和Vue Router的前端开发环境，通过Babel处理ES6语法，Webpack管理模块和资源，Vue Router处理应用的路由逻辑。开发者可以在此基础上快速构建和部署现代Web应用。
vue3+webpack+vue-router路由
05-21
vue3+webpack+vue-router路由，文件的代码包含了vue3+webpack+vue-router路由，代码清晰，下载下来只需要npm install下载一下依赖项之后就可以直接运行代码了。
vue3+webpack+vue-router路由+axios
05-21
vue3+webpack+vue-router路由+axios，资源包含了vue3+webpack+vue-router路由+axios的相关代码，并且对vue-router路由进行了封装，也对axios进行了封装，资源代码需要先：npm install 安装下依赖组件之后就可以启动...
超详细使用webpack搭建vue项目 + vue-router（附代码、成功截图）
weixin_43090018的博客
11-09 2646
** 1、首先新建一个文件夹把相关依赖下载完成 ** 1、npm init -y 初始化项目 2、npm i -D webpack webpack-cli webpack-dev-server 安装webpack、webpack-cli和serve 3、npm i -D babel-loader @babel/core @babel/preset-env 安装babel 4、npm i -D vue-loader vue-template-compiler html-w
webpack router的渲染
weixin_43209953的博客
01-17 211
注意：如果有render渲染了，那么router的组件必须放到render渲染的组件的根目录，原因： 1、render渲染的组件都是通过覆盖index.html来实现的，如果路由的标签&lt;router-view&gt;放在主页的#app根目录，那么是会被render所覆盖； 2、那么由于上面的原因，路由渲染组件的时候，就必须把路由标签&lt;router-view&gt;放在render所...
VUe+webpack构建单页router应用（一）
Daisy花园
12-12 5110
前期看了很多webpack的介绍，之前一直用requireJS或者browserify，真正决心来使用webpack，实在是因为webpack好像确实功能更全。这期想做的是通过webpack和vue-router搭建一个单页应用，并且将vue的transition组件加进去，做一个幻灯片的样子。 首先，贴上我的环境。 开始step1：安装vue cli 推荐更改为cnpm（淘宝的镜像），这样下
webpack router代码的抽取
weixin_43209953的博客
01-17 121
main页面代码： import Vue from 'vue'; import Vuerouter from 'vue-router'; //手动安装vuerouter; Vue.use(Vuerouter); //导入app组件 import app from './app.vue'; import router from './route.js' var vm=new Vue({ ...
vue2+webpack+router项目构建（详细步骤）-- 基础搭建
朽木·露琪亚
11-06 566
vue2+webpack+router项目构建（详细步骤）– 基础搭建最近用vue做新项目，又重新把这个搭建过程捋了一遍，在这儿简单的记录下。这一篇主要介绍的是vue2+webpack+vue-router的基本配置，包括生成dll文件缓存、按需加载等等。基础篇创建项目 创建项目文件夹：如，vue2-webpack 初始化项目，生成package.json文件： npm init 安装项目依赖（不
Vue+webpack构建单页router应用（二）
Daisy花园
12-13 1839
嵌套路由其实很简单，主要是vue2.0有一些变更。 所以要多看API文档，少看网上的教程 = =配置路由配置路由，这里为Home配置了两个子路由news和messageconst routes = [{ path: '/Hello', component: Hello }, { path: '/Home', component: Home, children
结合webpack使用vue-router
sleepwalker_1992的专栏
08-26 2288
结合webpack使用vue-router 1、cnpm i vue-router -S 2、在main.js中导入vue-router包，手动安装VueRouter import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); 3、在main.js中导入各个Vue组件 4、创建路由对象 ...
LiveQing 高性能流媒体服务器前端重构(五): webpack + vue-router 开发单页面前端实现按需加载
09-12 2404
为了让页面更快完成加载, 第一时间呈现给用户, 也为了帮用户节省流量资源, 我们可以利用 Vue 提供的按需加载功能
webpack router 模块组件的子组件路由
weixin_43209953的博客
01-17 360
note:是谁的子组件就把渲染的&lt;router-view&gt;标签放在这个组件的下面进行渲染 main文件的代码： import Vue from 'vue'; import Vuerouter from 'vue-router'; //手动安装vuerouter; Vue.use(Vuerouter); //导入app组件 import app from './app.vue'; ...
vue3+webpack+vue-router路由封装+axios封装+vuex封装 下载
05-01
综上所述，通过对Vue3、Webpack、Vue-Router、Axios、Vuex等技术的封装，可以提高代码的复用性和可维护性，从而加快项目的开发进度。同时，这些技术的结合还能够为项目提供更好的架构，提升用户的使用体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值