前期准备
由于本文内容是通过npm来加载vue,所以开始之前需安装nodejs环境,安装完成之后再执行以下步骤:
创建项目
rush:bash;">
mkdir vue-demo
cd vue-demo
使用 npm init 命令 生成package.json文件
rush:bash;">
npm init
大概生成的package.json 如下:
rush:js;">
{
"name": "vue-demo","version": "1.0.0","description": "this is a vue demo","main": "index.js","scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},"license": "ISC","dependencies": {
}
}
引入webpack ,关于如何使用webpack 请参考官网
rush:bash;">
npm install webpack --save-dev
如果使用npm下载的速度过慢,可以使用淘宝的cnpm 镜像
rush:bash;">
npm install -g cnpm –registry=https://registry.npm.taobao.org
输入以上命令即可将npm指向国内镜像,使用时需将npm 替换成cnpm即可, 其他不变
在项目中创建webpack.config.js 文件
rush:js;">
const path = require('path')
module.exports ={
entry:'./src/main.js',output:{
path:path.resolve(__dirname,'dist'),filename:"demo.js"
}
}
使用webpack 命令编译
rush:plain;">
webpack
编译之后的项目目录大概如下:
注意:在使用webpack命令之前 需先创建 index.html 和 main.js 文件 其中 main.js文件位于src 目录下
index.html 的内容如下
rush:xhtml;">
<Meta charset="UTF-8">
vue demo