webpack与vue-cli

本文详细介绍如何使用Webpack和Vue.js构建项目环境,包括安装所需依赖、配置开发服务器、使用Vue路由器以及创建项目模板等内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

webpak准备工作:
cnpm install webpack
webpack-dev-server
vue-loader
vue-html-loader
css-loader
vue-style-loader
vue-hot-reload-api
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime

webpack+vue-loader
webpack加载模块
1. npm install 或者 cnpm install
2. npm run dev
-> package.json
“scripts”:{
“dev”:”webpack-dev-server –inline –hot –port 8080”
}
以后下载模块:
npm install –save-dev

报EADDRINUSE这个错的意思是 端口被占用

路由:
vue-router
配合vue-loader使用:
1. 下载vue-router模块
cnpm install vue-router
2. import VueRouter from ‘vue-router’
3. Vue.use(VueRouter);
4. 配置路由
var router=new VueRouter();
router.map({
路由规则
})
5. 开启
router.start(App,’#app’);

注意:
之前: index.html  ->   <app></app>
现在: index.html  ->   <div id="app"></div>
App.vue ->   需要一个 <div id="app"></div>  根元素

代码压缩、上线用
npm run build
-> package.json
“scripts”:{
“dev”:”webpack -p”
}

脚手架:
vue-cli——vue脚手架
帮你提供好基本项目结构

本身集成很多项目模板:
simple 个人觉得一点用都没有
webpack 可以使用(大型项目)
Eslint 检查代码规范,
单元测试
webpack-simple 没有代码检查

基本使用流程:
1. npm install vue-cli -g 安装 vue命令环境
验证安装ok?
vue –version
2. 生成项目模板
vue init <模板名> 本地文件夹名称
3. 进入到生成目录里面
cd xxx
npm install
4. npm run dev

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值