时间:2021-05-25
npm init -y 初始化项目
安装各种依赖项
npm install --save vue 安装vue2.0
npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^2.1.0-beta.9 安装webpack以及webpack测试服务器,默认安装是1.0版本的,所以必须指定版本号
npm install --save-dev babel-core babel-loader babel-preset-es2015 安装babel,一般的浏览器是不认识es6语法的,babel的作用是将es6的语法编译成浏览器认识的语法
npm install --save-dev vue-loader vue-template-compiler 用来解析vue的组件,.vue后缀的文件
npm install --save-dev css-loader file-loader 用来解析css
编写页面
新建目录src,里面新建App.vue
<!-- 简单写个title和一个循环 --><template> <div id="example"> <h1>{{ msg }}</h1> <ul> <li v-for="n in 5">{{ n }}</li> </ul> </div></template><script>export default { data () { return { msg: 'Hello World!' } }}</script><style scoped>#example { background: red; height: 100vh;}</style>在src目录下新建main.js
import Vue from 'vue'import App from './App.vue'new Vue({ el: '#app', render: h => h(App)})配置webpack
在根目录下新建webpack.config.js
var path = require('path');var webpack = require('webpack');module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] }}打包项目
npm install -g webpack@^2.1.0-beta.25 全局安装webpack,以便使用webpack命令
webpack 用webpack命令打包项目,这是目录下会多出一个dist文件夹,查看里面会有build.js,发觉里面的es6语法已经被转化了
最终项目目录如图所示
在根目录下新建index.html,引入build.js
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><title>vue-webpack</title></head><body> <section id="app"></section> <script src="./dist/build.js"></script></body></html>页面如图所示
这样就算打包完成了,但是每修改一次都要重新打包这样显然没有任何效率,于是需要线上的热重载
npm install -g webpack-dev-server@^2.1.0-beta.9 全局安装webpack-dev-server,以便使用webpack-dev-server命令
webpack-dev-server 等待程序运行完毕
在浏览器输入http://localhost:8080/查看页面
这时修改页面的代码,不用刷新浏览器直接更改
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
一、vue2.0移除了$index和$key虽然说现在很多文章说他们的代码是vue2.0版本的,但是有一些仔细一看,发现并不全是2.0版本,有些语法还是1.0的
本文实例讲述了Vue2.0实现组件之间数据交互和通信操作。分享给大家供大家参考,具体如下:Vue2.0组件之间数据交互和通信。Vue2.0废弃了dispatch
本文介绍使用webpack2.0配置postcssloader,分享给大家。具体如下:安装postcss-loadernpminstall--save-devp
本文实例讲述了vue2.0实现的tab标签切换效果。分享给大家供大家参考,具体如下:这里利用vue2.0实现tab标签切换效果比较实用初学vue,练习写了一个d
在vue2.0中引入了mint-ui后总是报一个css的错误但是package.json中已经配置了css-loaderstyle-loader,webpack