持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第15天，点击查看活动详情
7.npm 安装使用 vue:
npm install vue
vue安装成功会存在两个版本：
- runtime-omly -->代码不能有template（相当于template）无法编译；
runtime-only(v2)(性能高， 代码量少【vue实例里面不能存在template标签，要使用render】)
render->vdom->ul(页面实现步骤)
new Vue({
el: '#app',
render(h){
h=> createElement(App)
1.createElement普通方法：createElement('标签',{标签的属性},['标签内的内容'])
2.组件以用法：return h(App)
}
})
- runtime-compiler -->代码可以有template
runtime-compiler(v1)
template->ast->render->vdom->ul(ast是抽象语法树)
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
报错解决（无法编译）：
webpack.config.js 配置：
resolve:{
//alias别名
alias:{
'vue$':'vue/dist/vue.esm.js'//将vue指向具体得文件夹（默认是vue/dist/vue.runtime.js）
}
},
8.npm vue
main.js 代码抽离：
-
js文件抽离法:
index.html : <div id='app'></div>main.js:
在vue实例里面，同时存在el和template会将 template组件直接替换到el目标上
import Vue from 'vue'; import App from './vue/app.js 将index中的html代码封装成为组件 直接 export defalut {template:``,data(){return{}}, const app=new Vue({ el:'#app', template:'<App/>', 在template 调用组件，替换到 el的目标位置 components:{ App 直接声明组件 } }) -
vue文件抽离法：
创建 .vue后缀文件
.vue：
<template> <div> </div> </template> <script> export default { name:'App', data(){ return {} } } </script> <style scoped> </style>引入.vue文件：
import App from './vue/App.vue' const app=new Vue({ el:'#app', template:'<App/>', 在template 调用组件，替换到 el的目标位置 components:{ App 直接声明组件 } })若要使用.vue 文件，还需配置：
npm install vue-loader vue-template-compiler --save-dev webpack.config.js: { test:/\.vue$/, use:['vue-loader'] }vue-loader 14版本开始需要 配置插件（或者降低版本13.0.0）安装插件
npm install html-webpack-plugin --save-devwebpack.config.js: ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); module：{}， plugins: [ new HtmlWebpackPlugin({template: 'index.html'}), ] vue-loader 15版本开始需要 配置VueLoaderPlugin webpack.config.js: const VueLoaderPlugin=require('vue-loader/lib/plugin') module：{}， plugins: [ new VueLoaderPlugin(), ] ```引入文件不用加后缀：（npm install html-webpack-plugin --save-dev extensions:['.js','.css','.vue'],）
webpack.config.js：
module：{}， resolve:{ //alias别名 extensions:['.js','.css','.vue'], alias:{ 'vue$':'vue/dist/vue.esm.js'//将vue指向具体得文件夹（默认是vue/dist/vue.runtime.js） } },
9.webpack 代码加密压缩：
npm install uglifyjs-webpack-plugin --save-dev
webpack.config.js:
const uglifyjsPlugin = require('uglifyjs-webpack-plugin');
module：{}，
plugins: [
new uglifyjsPlugin()
]
10.webpack 搭建本地服务器：(不需要每次打包才可以查看，实时监听文件修改，是放到内存的，没有放到磁盘的)
npm install webpack-dev-server --save-dev
webpack.config.js:（配置devServer）
module：{}，
devServer:{
contentBase:'./dist',//服务的哪一个文件夹
inline:true,//是否实时监听
//port:端口号（默认8080）
//historyApiFallback:在SPA页面中，依赖HTML5的是history
},
package.json 配置脚本：(因为webpack-dev-server是局部安装，直接使用 webpack-dev-server命令会先全局查找)
"dev":"webpack-dev-server" ( "dev":"webpack-dev-server --open" 可以直接打开项目)
运行 npm run dev（运行报错，降低webpack 和 webpack-dev-server 版本）
11.webpack.config.js 抽离：
按照目录创建文件
--dist
--build
----base.config.js //公共的配置（开发时、生产时都要）
----dev.config.js //开发时的配置
----prod.config.js //生产时的配置
将三个文件合并配置:（安装）
npm install webpack-merge --save-dev
- base.config.js:
清除单独是生产时、开发时的配置
- dev.config.js 和 prod.config.js的代码；
dev.config.js:(引入webpack-merge，然后再将 该 页面配置合并到 base.config.js )
//主要是在devServer里面的配置
//开发时的配置
const webpackMerge=require('webpack-merge')
const baseConfig=require('./base.config.js')
module.exports=webpackMerge.merge(baseConfig,{
//只是开发时的：
devServer:{
contentBase:'./dist',//服务的哪一个文件夹
inline:true,//是否实时监听
//port:端口号（默认8080）
//historyApiFallback:在SPA页面中，依赖HTML5的是history
},
})
- prod.config.js:(引入webpack-merge，然后再将 该 页面配置合并到 base.config.js )
//主要是打包后还会存在的配置 uglifyjsPlugin （丑化加密js）
//生产时的配置（打包后）
const uglifyjsPlugin = require('uglifyjs-webpack-plugin'); //丑化代码
const webpackMerge=require('webpack-merge')
const baseConfig=require('./base.config.js')
module.exports=webpackMerge.merge(baseConfig,{
plugins: [
new uglifyjsPlugin()
],
})
- 配置package.json的脚本：
"build": "webpack",//默认 运行的时 webpack.congfig.js (打包)
// 修改：
"build": "webpack --config ./build/base.config.js",
"dev": "webpack-dev-server --open" ,//默认 运行的时 webpack.congfig.js 里的devServer （实时运行）
// 修改：
"dev": "webpack-dev-server --open --config ./build/dev.config.js"
目前打包实在 build文件夹 里面：
所以要修改：path:path.resolve(__dirname,'../dist')（打包到build 同级的 dist）
base.config.js：
output:{//输出口
path:path.resolve(__dirname,'../dist'),//路径（动态获取文件）resolve是在path中的一个方法，__dirname是获取上下文的路径
filename:'bundle.js',//文夹名
// publicPath:'./dist/'//为url路径添加dist/
},
