(精华2020年5月8日更新) vue教程篇 手写脚手架vue-cli
首先先上脚手架目录webpack-demo
webpack-demo
|-index.html
|- src
---- |-main.js 入口文件
------|-App.vue vue文件
|-package.json 工程文件
|-webpack.config.js webpack配置文件
|-.babelrc Babel配置文件
安装如下包
npm install vue -S
npm install webpack -D
npm install webpack-cli -D
cnpm install webpack-dev-server -D
npm install vue -D
npm install vue-loader -D
npm install css-loader -D
npm install vue-style-loader -D
npm install file-loader -D
npm install url-loader -D
npm install html-webpack-plugin -D
npm install babel-loader -D
npm install @babel/core -D
npm install @babel/preset-env -D //根据配置的运行环境自动启用需要的babel插件
npm install vue-template-compiler -D //预编译模板
合并：npm install -D webpack webpack-cli webpack-dev-server vue vue-loader css-loader vue-style-loader file-loader url-loader
babel-loader @babel/core @babel/preset-env vue-template-compiler
webpack.config.js 文件内容
//入口文件
var path = require('path');
var SRC_PATH = path.resolve(__dirname,'./src');
var DIST_PATH = path.resolve(__dirname,'./dist');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
//配置入口文件
entry:SRC_PATH +'/main.js',
//配置入口文件输出位置
output:{
path:DIST_PATH, //项目根路径
filename:'[name].js'
},
resolve: {
//别名
alias: {
//默认的是vue.runtime.esm.js
// 'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
//配置模块加载器
module:{
rules:[
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test:/\.vue$/, //所有以.vue结尾的文件都由vue-loader加载
use:'vue-loader'
},
{
test:/\.js$/, //所有以.js结尾的文件都由babel-loader加载，除了node_modules以外
use:'babel-loader',
exclude:/node_modules/
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: [{
loader:'url-loader',
options: {
limit: 10000,
name: "fonts/[name].[hash:5]"
}
}],
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use:[{
loader:'url-loader', //是指定使用的loader和loader的配置参数
options:{
name: "[name].[hash:5]",
limit:1024, //是把小于1024B的文件打成Base64的格式，写入JS
}
}]
}
]
},
// 开发服务器
devServer: {
hot: true, // 热更新，无需手动刷新
contentBase: path.resolve(__dirname, './dist/'), //热启动文件所指向的文件路径
host: '0.0.0.0', // host地址
port: 8083, // 服务器端口
historyApiFallback: true, // 该选项的作用所用404都连接到index.html
publicPath:'/', //默认设置
proxy: {
"/api": "http://localhost:3000"
// 代理到后端的服务地址，会拦截所有以api开头的请求地址
} ,
useLocalIp: true ,
// open:true,
// noInfo:true
},
// 插件
plugins: [
new VueLoaderPlugin(),
new htmlWebpackPlugin({
filename: path.resolve(DIST_PATH,'index.html'), //打包后的文件名
title: 'XXX服务平台', //打包后的页面title
template: path.resolve(__dirname,'index.html'), //打包的模板文件
inject: true,//打包body下面
hash: true,//是否hash
favicon: path.resolve(__dirname, 'favicon.ico')
}),
]
}
package.json 文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config webpack.config.js",
"build": "webpack --config webpack.config.js"
},
vue-router 配置
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
import home from '../pages/home.vue';
import news from '../pages/news.vue';
var allRoutes = [{
path:'/home',
name:'home',
component:home
},{
path:'/news',
name:'news',
component:news
}]
export default new VueRouter({
routes:allRoutes,
mode:'hash', //history
base:'/',
// vue-router 认为只有路由真正匹配时，才会加上 exact-active-link 这个 class，
// 如果只有一部分重合，就会加上 active-menu。
// fallback
// 不是所有浏览器都支持前端路由的方式，如果不支持，设置 fallback: true，
// vue 会自动 fallback 到 hash 模式。
fallback: true,
linkActiveClass: "active-menu",
linkExactActiveClass: "exact-active-menu",
})
// 在main.js中把router 实例注入到 vue 根实例中,就可以使用路由了
main.js
import App from './App.vue'
import VueRouter from './router/index.js';
// import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI);
Vue.prototype.$axios = axios;
//template模式
// new Vue({
// el:'#app',
// data:{
// hello:'hello',
// msg:'world'
// },
// // template:`
// // {{msg}}
// // `,
// components:{App}, //注册全局组件
// template:'App.vue
<template>
<div id="app">
<h1>{{msg}}</h1>
<div >
<ul>
<router-link to="/home?name=laney" tag='li'>主页</router-link>
<router-link to="/news" tag='li'>新闻</router-link>
</ul>
<!-- <ul @click="gotoPage($event)">
<li tag='home'>主页</li>
<li tag='news'>新闻</li>
</ul> -->
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to ruanmou'
}
},
methods:{
gotoPage(ev){
var target = ev.target,
tag = target.getAttribute('tag');
switch(tag){
case 'home':
//相当于get方式
this.$router.push({
path:'/home',
query:{
name:'laney'
}
})
break;
case 'news':
this.$router.push({
path:'/news',
query:{
age:'10'
}
})
break;
}
}
}
}
</script>