環(huán)境要求
需要先按照Node.js環(huán)境
準(zhǔn)備
- 創(chuàng)建文件夾vue-demo
- 在文件夾下面新建四個(gè)文件，分別是index.html, main.js, App.vue, webpack.config.js
- cmd到vue-demo文件夾下面，輸入命令npm init --yes 用來(lái)生成package.json文件，然后修改里面的scripts如下：
"scripts": {
"dev": "webpack-dev-server --inline --hot"
},
--inline --hot 是用來(lái)進(jìn)行項(xiàng)目的熱加載
4.安裝webpack環(huán)境，在項(xiàng)目cmd下面，分別輸入
npm install webpack --save-dev
npm install webpack-dev-server --save-dev
5.App.vue添加數(shù)據(jù)，用于在界面上顯示
<template>
<h1>Welcome Vue</h1>
</template>
6.index.html添加數(shù)據(jù)
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首頁(yè)</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就是編譯后輸出的文件，名稱(chēng)和在index.html寫(xiě)的一致
8.最后一步，引入相關(guān)需要的組件了，直接在項(xiàng)目目錄下的cmd窗口中添加，如下
添加babel編譯相關(guān)組件
npm install babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save-dev
添加loader相關(guān)組件
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 沒(méi)有--dev
兩者的區(qū)別，一個(gè)是放在devDependencies中，另外一個(gè)放在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來(lái)安裝
然后就可以用命令來(lái)啟動(dòng)項(xiàng)目了
npm run dev
然后在瀏覽器中打開(kāi)http://localhost:8080 就可以看到一個(gè)Welcome Vue字樣了
