详解用webpack2.0构建vue2.0超详细精简版
发布时间：2020-12-17 03:00:41 所属栏目：百科 来源：网络整理
导读：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 --
|
安装各种依赖项
编写页面 新建目录src，里面新建App.vue {{ msg }}
在src目录下新建main.js / 实例化一个vue /
new Vue({ el: '#app',render: h => h(App) }) 配置webpack 在根目录下新建webpack.config.js module.exports = {
/ 输入文件 / entry: './src/main.js',output: { / 输出目录，没有则新建 / path: path.resolve(__dirname,'./dist'),/ 静态目录，可以直接从这里取文件 / publicPath: '/dist/',/ 文件名 / filename: 'build.js' },module: { rules: [ / 用来解析vue后缀的文件 / { test: /.vue$/,loader: 'vue-loader' },/ 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 / { test: /.js$/,loader: 'babel-loader',/ 排除模块安装目录的文件 / exclude: /node_modules/ } ] } } 打包项目
最终项目目录如图所示
在根目录下新建index.html，引入build.js
vue-webpack
相关内容
推荐文章
站长推荐
热点阅读
|
