环境要求
需要先按照Node.js环境
准备
- 创建文件夹vue-demo
- 在文件夹下面新建四个文件，分别是index.html, main.js, App.vue, webpack.config.js
- cmd到vue-demo文件夹下面，输入命令npm init --yes 用来生成package.json文件，然后修改里面的scripts如下：
"scripts": {
"dev": "webpack-dev-server --inline --hot"
},
--inline --hot 是用来进行项目的热加载
4.安装webpack环境，在项目cmd下面，分别输入
npm install webpack --save-dev
npm install webpack-dev-server --save-dev
5.App.vue添加数据，用于在界面上显示
<template>
<h1>Welcome Vue</h1>
</template>
6.index.html添加数据
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<div id="box">
<app></app>
</div>
<script src="bundle.js"></script>
</body>
</html>
<app></app>是我们要引入的组件
bundle.js是编译后的js
7.webpack.config.js配置
module.exports={
entry:'./main.js',
output:{
path:__dirname,
filename:'bundle.js'
},
module:{
loaders:[
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
}
]
},
babel:{
presets:['es2015'],
plugins:['transform-runtime']
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
}
};
entry 程序入口 main.js， output filename就是编译后输出的文件，名称和在index.html写的一致
8.最后一步，引入相关需要的组件了，直接在项目目录下的cmd窗口中添加，如下
添加babel编译相关组件
npm install babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save-dev
添加loader相关组件
npm install css-loader vue-html-loader vue-loader vue-style-loader --save-dev
添加热加载和vue-template-compiler
npm install vue-hot-reload-api vue-template-compiler --save-dev
最后，最重要的，添加vue
npm install vue --save
注意这里是--save 没有--dev
两者的区别，一个是放在devDependencies中，另外一个放在dependencies中，最后package.json的文件如下：
{
"name": "vue-demo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack-dev-server --inline --hot"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-runtime": "^6.22.0",
"css-loader": "^0.26.1",
"vue-hot-reload-api": "^2.0.8",
"vue-html-loader": "^1.2.3",
"vue-loader": "^10.0.2",
"vue-style-loader": "^1.0.0",
"vue-template-compiler": "^2.1.10",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"
},
"dependencies": {
"vue": "^2.1.10"
}
}
npm install 慢的话，可以用cnpm来安装
然后就可以用命令来启动项目了
npm run dev
然后在浏览器中打开http://localhost:8080 就可以看到一个Welcome Vue字样了
