(精华)2020年7月12日 vue 手搭脚手架vue-cli
Vue.js
一、 单文件组件
1. .vue文件
.vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js
.vue文件由三部分组成：、
2. vue-loader
浏览器本身并不认为.vue文件，所以必须对.vue文件进行加载解析，此时需要vue-loader
类似的loader还有许多，如：html-loader、css-loader、style-loader、babel-loader等
需要注意的是vue-loader是基于webpack的
3. webpack
webpack是一个前端资源模板化加载器和打包工具，它能够把各种资源都作为模块来使用和处理
实际上，webpack是通过不同的loader将这些资源加载后打包，然后输出打包后文件
简单来说，webpack就是一个模块加载器，所有资源都可以作为模块来加载，最后打包输出
官网
webpack有一个核心配置文件：webpack.config.js，必须放在项目根目录下
4. 示例，步骤：
4.1 创建项目，目录结构 如下：
webpack-demo
|-index.html
|- src
---- |-main.js 入口文件
------|-App.vue vue文件
|-package.json 工程文件
|-webpack.config.js webpack配置文件
|-.babelrc Babel配置文件
mkdir webpack-demo
touch index.html webpack.config.js .babelrc
mkdir src
cd src
touch main.js App.vue
4.2 编写App.vue
<template>
<div id="app">
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to ruanmou'
}
}
}
</script>
4.3 安装相关模板
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
4.4 编写main.js
/**
* 使用ES6语法引入模板
*/
import Vue from 'vue'
import App from './App.vue'
new Vue({
el:'#app',
render:function(h){ //使用render函数渲染组件
return h(App);
}
});
-------------------------------------------------
/**
* 使用ES6语法引入模板
*/
import Vue from 'vue'
import App from './App.vue'
import VueRouter from './router/index.js';
// 第一种写法： index.html里的dom 为app作为模板
// new Vue({
// el:'app',
// data:{
// hello:'hello',
// msg: 'Welcome to ruanmou'
// }
// })
//第二种写法：template 模式， 需要compiler去编译成render函数进行渲染页面，性能不是最优
// new Vue({
// el:'app',
// data:{
// hello:'hello',
// msg: 'Welcome to ruanmou'
// },
// // template:`
// // {{msg}}
// // `,
// // 改成引用组件就是下面的模式
// components:{
// App //App:App
// }, //注册全局组件
// template:'4.5 编写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');
module.exports={
//配置入口文件
entry:SRC_PATH +'/main.js',
//配置入口文件输出位置
output:{
path:DIST_PATH, //项目根路径
filename:'[name].js'
},
resolve: {
//别名
alias: {
'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/
}
]
},
// 开发服务器
devServer: {
hot: true, // 热更新，无需手动刷新
contentBase: path.resolve(__dirname, './dist/'), //热启动文件所指向的文件路径
host: '0.0.0.0', // host地址
port: 8082, // 服务器端口
historyApiFallback: true, // 该选项的作用所用404都连接到index.html
publicPath:'/', //默认设置
proxy: {
"/api": "http://localhost:3000"
// 代理到后端的服务地址，会拦截所有以api开头的请求地址
} ,
useLocalIp: true ,
// open:true,
// noInfo:true
},
// 插件
plugins: [
new VueLoaderPlugin()
]
}
4.6 编写.babelrc
{
"presets":[
[
"@babel/preset-env", {
"useBuiltIns": "usage", //按需注入
"corejs": "2", // 声明corejs版本
"targets": {
"browsers": [ "> 1%", "last 5 versions", "ie >= 8" ]
}
}
]
]
}
4.7 编写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"
}
4.8 运行测试
npm run dev
npm run build
4.9 理顺8个版本vue的区别(小结)
vue.js ： vue.js则是直接用在