前期准备
- webpack
- vue.js
- npm
- nodejs
- ES6语法
由于本文内容是通过npm来加载vue，所以开始之前需安装nodejs环境，安装完成之后再执行以下步骤：
创建项目
mkdir vue-demo cd vue-demo
使用 npm init 命令 生成package.json文件
npm init
大概生成的package.json 如下:
{
"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 请参考官网
npm install webpack --save-dev
如果使用npm下载的速度过慢，可以使用淘宝的cnpm 镜像
npm install -g cnpm –registry=https://registry.npm.taobao.org
输入以上命令即可将npm指向国内镜像，使用时需将npm 替换成cnpm即可， 其他不变
在项目中创建webpack.config.js 文件
const path = require('path')
module.exports ={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:"demo.js"
}
}
使用webpack 命令编译
webpack
编译之后的项目目录大概如下:
注意：在使用webpack命令之前 需先创建 index.html 和 main.js 文件 其中 main.js文件位于src 目录下
index.html 的内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue demo</title> </head> <body> <script src="./dist/demo.js"></script> </body> </html>
main.js 的内容如下
alert('hello world');
引入vue
npm install vue --save
执行命令后会在package.json中新增如下代码
"dependencies": { "vue": "^2.4.2" }
将main.js中的内容修改为如下代码
import Vue from 'vue'
var vm = new Vue({
el:'#app',
data:{
msg:'hello vue'
}
})
引入babel
npm install --save-dev babel-core babel-loader
由于在使用vue时会用到很多es6的语法，但是现在很多浏览器对es6的支持不是很好，所以在编译时需要将这些语法转换es5的语法，此时我们使用babel来进行编译。