首先，大家要对 vue 框架有一定的了解不懂的看这里 https://cn.vuejs.org/v2/guide/，其次要对 webpack 打包工具有了解不懂的看这里https://www.webpackjs.com/。好啦，大家看完上面的学习文档后，我们就开始搭建一个简单的 vue 项目吧。
这里默认大家都安装了 node、npm,没安装的自己去安装哈，这里就不说了。
-
创建项目
在命令行输入 mkdir vue-demo，并进入 vue-demo 文件夹中,执行 npm init,这里会有一些配置提醒，如果不设置就一直按回车，最后项目初始化成功。
-
安装相关依赖如下
例如dependencies中的依赖在控制台输入 npm install vue-loader --save，依次安装，devDependencies中的依赖在控制台输入npm install -babel-core --save-dev
"dependencies": {
"vue": "^2.5.17",
"vue-loader": "^15.4.2",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.17"
}
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.23.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
- 创建相关文件
// 文件1-webpack.config.js
var webpack = require('webpack');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: __dirname + "/src/main.js",//入口文件
output: {
path: __dirname + "/dist",//打包后导出文件夹
filename: "bundle.js"//导出的文件名
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015','react']
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
},
devServer: {
contentBase: "./dist",
stats:{colors: true},
historyApiFallback: true,
inline: true,
open: true //自动打开浏览器
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
title: 'vue-demo',
filename: 'index.html',
template: 'index.html'
}),
]
}
<!-- 文件2 index.html 文件 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>vue demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<link rel="stylesheet" href="">
<link rel="shortcut icon" href="" type="image/x-icon" />
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./bundle.js"></script>
</body>
</html>
//根组件 App.vue
<template>
<div id="app">
<navbar></navbar>
<router-view></router-view>
</div>
</template>
<script>
import navbar from './components/nav.vue'
export default {
name: 'app',
components: {navbar}
}
</script>
//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
el: '#app',
router: router,
template: '<App/>',
components: { App }
})
//路由文件index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import PageOne from '../components/page-one.vue'
import PageTwo from '../components/page-two.vue'
let routers = [
{
path: '/pageOne',
name: 'pageOne',
component: PageOne
},
{
path: '/pageTwo',
name: 'pageTwo',
component: PageTwo
},
{
path: '/',
name: 'home',
component: PageOne
}
];
export default new Router({
routes: routers
})
//组件 page-one.vue
<template>
<div>
{{content}}
</div>
</template>
<script>
export default {
data() {
return {
content: '规则就是用来打破的，略略略'
}
}
}
</script>
//组件 page-two.vue
<template>
<div>
{{content}}
</div>
</template>
<script>
export default {
data() {
return {
content: '有谁看到了我的小熊吗？'
}
}
}
</script>
文件夹目录结构
image.png
- 在 package.json文件的"scripts" 内容中加入
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server",
"build": "NODE_ENV=production webpack --mode production --optimize-minimize"
},
对学习抱有热情的开发小伙伴欢迎加入 qq群685421881，更欢迎热爱编程的妹子进入，让我们一起学习 并进步吧！
网友评论