webpack搭建vue项目开发环境【文档向学习】

时间  2019-11-08
标签 webpack 搭建 vue 项目 开发环境 文档向学习 繁體版
原文   原文链接

为什么有这篇文章

各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目，但不管是出于学习webpack的目的仍是为了解决工做实际须要都面临着一个现实问题，那就是版本更新。别人的帖子可能刚写好版本就更新了，又要对着帖子找文档。css

但这个过程十分重要，由于你想要的一切早已都在文档中给出了说明，在查阅文档的过程当中不但能学会正确的使用工具更加强了阅读文档这种姿式正确的学习能力。html

本文就是记录一次不断遭遇版本问题，一路查阅文档达到学习目的的经历，分享给你们。文章中每一个章节提到的相关文档都会在本章节总结，在文章最后我还会将全部相关文档的连接进行汇总出来方便你们学习。前端

0. 安装webpack

第一个要查阅的就是webpack的官方文档，因为webpack近年来的使用普遍，中文文档早已跟上。vue

webpack官方文档： https://webpack.docschina.org/

咱们能够在文档-指南中找到安装相关的内容。node

webpack安装： https://webpack.docschina.org...

官方已说明不推荐全局安装webpack由于这样会将你项目中的webpack锁定到指定版本。不须要全局安装的可跳过此步骤webpack

全局安装webpack：

es6
npm i -g webpack

<h2>1. 项目初始化</h2>
<h3>初始化项目</h3>
<p>在项目目录下初始化项目会获得package.json文件：</p>
<pre><code class="coffeescript">npm init


安装webpack和webpack-dev-server以及Vue


webpack4会依赖webpack-cli，若是你没有安装也没必要担忧，npm会直接报错提示你web


  
  
  

 

  
  webpack安装： 
 
  https://webpack.docschina.org... 
 
  
webpack-dev-server： 
 
  https://webpack.docschina.org... 

 


npm i webpack webpack-dev-server webpack-cli --save-dev
 npm i vue --savevue-router



<h3>配置webpack.config.js</h3>
<p>根目录下新建webpack的配置文件webpack.config.js。<br>配置 入口、出口路径、打包后文件名和devServer的相关配置项</p>
<blockquote>使用一个webpack的配置文件：<a href="https://webpack.docschina.org/guides/getting-started/#%E4%BD%BF%E7%94%A8%E4%B8%80%E4%B8%AA%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6" rel="nofollow noreferrer">https://webpack.docschina.org...</a>
</blockquote>



var path = require('path');
 var webpack = require('webpack');vuex


module.exports = {
 //项目入口文件
 entry: './src/main.js',
 output: {
 //打包出口路径
 path: path.resolve(__dirname, './dist'),
 //经过devServer访问路径
 publicPath: '/dist/',
 //打包后的文件名
 filename: 'main.js'
 },
 mode:'development',
 devServer: {
 historyApiFallback: true,
 overlay: true
 }
 };


```


根目录下新建index.html（模板以下）


新建index.html做为项目的主体页面，留出入口文件，入口文件的路径为webpack打包后输出的路径。


```<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>webpack-vue</title>
 <meta name="description" content="">
 <meta name="keywords" content="">
 </head>
 <body>
 <script src="/dist/main.js"></script>
 </body>
 </html>



<h3>新建入口文件</h3>
<p>新建在src目录用来存放各类组件和静态文件，在src目录下新建入口文件main.js</p>
<h2>2. webpack的准备工做</h2>
<p>为方便开发调试，打包以及后期的代码编写便捷，咱们须要对webpack进行初步配置</p>
<h3>自定义npm命令</h3>
<p>package.json 增长 scripts：</p>



"scripts": {
 "dev": "webpack-dev-server --hot --open",
 "build": "webpack --mode production --progress --hide-modules"
 },



<p>这一步的目的是简化在命令行中输入复杂指令的操做，如需执行上述两命令只须要在命令行执行：</p>
<pre><code class="coffeescript">npm run dev
npm run build


webpack-dev-server --hot --open目的是开启一个本地服务，--hot为热加载，可实视查看页面状态，--open直接从浏览器打开
webpack --mode production --progress --hide-modules是打包整个项目的指令，--mode production是以生产模式打包，这样会获得体积更小的文件，有兴趣的同窗能够试试不加这个指令，看看差距到底有多大。--progress打印出编译进度的百分比值，hide-modules隐藏关于模块的信息
webpack的全部命令行能够在 api-命令行接口（cli） 中找到


    
    
    
  
   

     webpack命令行接口： 
    https://webpack.docschina.org... 
   


配置webpack解析（resolve）


webpack.config.js中增长：




resolve: {
  //路径别名
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@':path.resolve(__dirname, './src'),
  },
  //路径别名自动解析肯定的扩展
  tensions: ['.js', '.vue', '.json']
},


resolve是webpack关于解析的配置项，alias容许你在项目中使用路径别名代替复杂的路径。
extensions会让webpack自动查找特定后缀的文件，在项目中引入文件时将没必要再书写文件后缀。
至于为什么将vue的路径别名指向vue/dist/vue.esm.js请看下一章节vue的内容。


    
    
    
  
   

     webpack解析（resolve）： 
    https://webpack.docschina.org... 
   


3. 引入Vue


这一步咱们先暂不考虑使用Vue的单页面组件。


经过查看 node_modules/vue/dist/README.md 咱们能够获得关于webpack配置的说明，引入vue其实是引用 node_modules/vue/dist/vue.esm.js，有理有据安心使用，而且会告诉你若是你在使用webpack 1.0应该引用vue.common.js，这即是上一步配置路径别名的依据。




在index.html中添加挂载点dom（#app）


```<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>webpack-vue</title>
 <meta name="description" content="">
 <meta name="keywords" content="">
 </head>
 <body>
 <div id="app">{{message}}</div>
 <script src="/dist/main.js"></script>
 </body>
 </html>



<h3>在main.js中引入vue</h3>



import Vue from 'vue'


var app = new Vue({
 el: "#app",
 data: {
 message: 'hello webpack!!'
 }
 })



<p>启动server，能够预览到页面显示 'hello webpack!!'。</p>
<pre><code class="coffeescript">npm run dev


4. 配置loader——使用 css/scss


webpack默认只能解析js文件，所以须要在webpack.config.js中配置相应的解析器。


安装scss和相应样式文件解析器


npm i node-sass css-loader vue-style-loader sass-loader –save-dev



<p>关于webpack解析样式的文档比较散乱，经过粗略查阅，<br><code>css-loader</code>用来解析css文件，<br><code>style-loader</code>用来解析dom中经过<code>&lt;style&gt;&lt;/style&gt;</code>注入的样式，<br>而<code>vue-style-loader</code>是vue官方基于style-loader开发的适用于vue的样式解析，<br><code>sass-loader</code>用来解析sass/scss文件</p>
<blockquote>webpack - loader：<a href="https://webpack.docschina.org/loaders/" rel="nofollow noreferrer">https://webpack.docschina.org...</a><br>vue-style-loader：<a href="https://www.npmjs.com/package/vue-style-loader" rel="nofollow noreferrer">https://www.npmjs.com/package...</a>
</blockquote>
<h3>在webpack.config.js中配置解析器</h3>



module: {
 rules: [{
 test: /.css$/,
 use: [
 'vue-style-loader',
 'css-loader'
 ]
 },{
 test: /.scss$/,
 use: [
 'vue-style-loader',
 'css-loader',
 'sass-loader'
 ]
 },
 {
 test: /.sass$/,
 use: [
 'vue-style-loader',
 'css-loader',
 'sass-loader?indentedSyntax'
 ]
 }]
 },



<p>以上配置意为：<br><code>.css</code>为后缀的文件使用<code>css-loader</code>, <code>vue-style-loader</code>解析<br><code>.scss</code>和<code>.sass</code>为后缀的文件使用<code>sass-loader</code>，<code>css-loader</code>, <code>vue-style-loader</code>解析<br>解析顺序是由下到上的</p>
<blockquote>webpack - module：<a href="https://webpack.docschina.org/configuration/module/#module-rules" rel="nofollow noreferrer">https://webpack.docschina.org...</a><br>webpack - sass-loader：<a href="https://webpack.docschina.org/loaders/sass-loader/" rel="nofollow noreferrer">https://webpack.docschina.org...</a>
</blockquote>
<h3>在项目中使用、引入样式（测试）</h3>
<p>在src目录下新建目录assets/styles存放统同样式，新建index.scss，写一段scss代码：</p>
<pre><code class="scss">$appColor:red;
#app{
  color:$appColor;
}



在main.js中引入样式：



import ‘./assets/styles/index.scss’


再次重启服务能够看到样式已经加载成功了


5. 配置loader——使用图片


一样webpack人没法解析图片格式的文件，须要把图片当作模块使用file-loader解析。


      
      
      
    
     

       file-loader： 
      https://webpack.docschina.org... 
     


安装file-loader


npm i file-loader --save-dev



<h3>在webpack.config.js中配置解析器</h3>



{
 test: /.(png|jpg|gif|svg)$/,
 loader: 'file-loader',
 options: {
 name: '[name].[ext]?[hash]'
 }
 }



<h3>在项目中引入图片（测试）</h3>
<p>在src目录下按照代码中路径准备一张图片</p>



Vue.component('myComponent', {
 template: '<img :src="url" />',
 data() {
 return {
 url: require('./assets/images/logo.png')
 }
 }
 })


```


在index.html中使用该组件


```<div id="app">
 {{message}}
 <my-component></my-component>
 </div>



<p>重启服务，图片应该被成功加载了。</p>
<h2>6. 配置loader——使用babel</h2>
<p>babel可让咱们在项目中自由的使用es6语法，他会为咱们将es6语法编译成浏览器广泛通用的es5语法。<br>在此以前咱们必需要对babel有必定的了解：</p>
<blockquote>babel官方文档：<a href="https://babel.docschina.org/docs/en/usage" rel="nofollow noreferrer">https://babel.docschina.org/d...</a>
</blockquote>
<p>在babel的使用指南中咱们看到安装babel须要安装的依赖和配置babel的方法。<br>而且咱们得知一个噩耗，babel从7.0开始与以前版本有写不兼容了。若是你的package.json中babel的版本混乱，很容易形成配置失败。</p>
<h3>安装babel</h3>
<pre><code class="coffeescript">npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill


注意：


        
        
        
      
       
     
        
  • 其中preset是babel的配置，babel-loader在webpack中解析babel中会用到，polyfill也是babel的一个依赖
    •  
        
  • babel的6.0 和7.0不兼容，若是package.json中版本混乱建议降级活升级以统一版本
    •  
       


在webpack.config.js中配置解析器


        
        
        
      
       

         babel的webpack配置： 
        https://babel.docschina.org/s... 选择webpack 
       


module增长一条rules:



{
  test: /\.js$/, exclude: /node_modules/,
  loader: "babel-loader"
}



入口文件更改成：



entry: ["@babel/polyfill", './src/main.js'],


新建配置文件.babelrc


注意查看关于env的配置文档，新版本写法有变化。


        
        
        
      
       

         @babel/preset-env: 
        https://babel.docschina.org/d... 
       



{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}



检测es6语法（正常运行说明babel配置成功）


在src下新建util.js



export default function getData() {
    return new Promise((resolve, reject) =&gt; {
        resolve('ok');
    })
}



main.js



//引入组件
import getData from './util';

var app = new Vue({
  el: "#app",
  data: {
    message: 'hello webpack!!'
  },
  methods: {
    async fetchData() {
      const data = await getData();
      this.message = data;
    }
  },
  created() {
    this.fetchData();
  }
})


import getData from './util';


常见报错


        
        
        
      
       
     
        
  1.  Can't resolve 'babel-polyfill' in 'E:\vue\webpack-vue'
    webpack的入口文件polyfill版本与配置写法不匹配
    错误：entry: ["babel-polyfill", './src/main.js'],
    正确：entry: ["@babel/polyfill", './src/main.js'],
    2.  
        
  2.  regeneratorRuntime is not defined
    未安装@babel/polyfill
    npm i babel-polyfill –save
    3.  
        
  3.  Plugin/Preset files are not allowed to export objects
    webpack的报错，版本混乱，不兼容
    清理package.json中的babel依赖，删除node_module，从新执行npm install，再次安装babel依赖时注意版本统一
    4.  
       


7. 使用Vue单文件组件


vue-loader中介绍了如何使用Vue单文件组件:


        
        
        
      
       

         vue-loader: 
        https://vue-loader.vuejs.org/zh/ 
       


安装vue-loader及依赖


npm i vue-loader vue-template-compiler –save-dev



<h3>配置webpack.config.js</h3>
<blockquote>Vue单文件组件：<a href="https://vue-loader.vuejs.org/zh/guide/" rel="nofollow noreferrer">https://vue-loader.vuejs.org/...</a>
</blockquote>



// webpack.config.js
 const VueLoaderPlugin = require('vue-loader/lib/plugin')


module.exports = {
 module: {
 rules: [
 // ... 其它规则
 {
 test: /.vue$/,
 loader: 'vue-loader'
 }
 ]
 },
 plugins: [
 // 请确保引入这个插件！
 new VueLoaderPlugin()
 ]
 }
 ```


准备单文件组件


在src目录下建立文件App.vue
在src目录下新建目录components用来存放单文件组件，新建文件header.vue


App.vue


  &lt;div&gt;
    &lt;home-header user="vict"&gt;&lt;/home-header&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  import homeHeader from '@/components/header.vue'
  export default {
    name:'app',
    components:{
      homeHeader
    }
  }
&lt;/script&gt;

&lt;style lang="scss" scoped&gt;
  $txtColor:red;
  .sg{
    color:$txtColor
  }
&lt;/style&gt;



header.vue（子组件）



&lt;template&gt;
  &lt;div&gt;
    header
    &lt;span&gt;color&lt;/span&gt;
    &lt;img src="@/assets/images/logo.png"&gt;
    {{this.message}} - {{this.user}}
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  export default {
    name:'homeHeader',
    data () {
      return {
        message:'hello world'
      }
    },
    props: {
      user:String
    }
  }
&lt;/script&gt;

&lt;style lang="scss" scoped&gt;
  span{
    color:green
  }
&lt;/style&gt;


main.js



import Vue from 'vue'
import App from './App.vue'
import './assets/styles/index.scss'

new Vue({
  render:h =&gt; h(App)
}).$mount('#app')


8. 解决静态文件


在.vue中url路径将被解析成webpack模块请求，
这里建议在webpack.config.js中配置路径别名以方便在单文件组件中引用图片等静态资源
在单文件组件中能够这样使用：


&lt;img src="@/assets/images/logo.png"&gt;


9. 注入Vue Router


          
          
          
        
         

           vue-router: 
          https://router.vuejs.org/zh/ 
         


安装VueRouter


npm i vue-router –save



<h3>在main.js的Vue实例中注入Router</h3>



import Vue from 'vue'
 import App from './App'
 //引入router组件
 import router from './router/router'
 import './assets/styles/reset.css'


new Vue({
 //注入router
 router,
 render:h => h(App)
 }).$mount('#app')



<h3>构建router组件</h3>
<p>按照路径建立router文件：src/router/router.js</p>
<p>router.js</p>



import Vue from 'vue'
 import VueRouter from 'vue-router'


import Page1 from '@/components/page1'
 import Page2 from '@/components/page2'


Vue.use(VueRouter)
 export default new VueRouter({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: [{
 path: '/',
 name:'home',
 component: Page1
 },{
 path: '/page2',
 name:'page2',
 component: Page2
 }]
 })



<p><em>常见的渲染失败的缘由：</em></p>
<ul>
<li><em>router实例的路由配置项 routes，不要误写成 routers</em></li>
<li><em>routes配置项中必需要有路径为’/’，不然渲染失败</em></li>
</ul>
<h3>使用router</h3>
<p>在App.vue中能够直接使用<code>&lt;router-view&gt;</code>和<code>&lt;router-link&gt;</code>标签</p>
<h2>10. 注入Vuex</h2>
<blockquote>vuex: <a href="https://vuex.vuejs.org/zh/guide/" rel="nofollow noreferrer">https://vuex.vuejs.org/zh/guide/</a>
</blockquote>
<h3>安装vuex</h3>
<pre><code class="coffeescript">npm i vuex –save


在main.js的Vue实例中注入store



import Vue from 'vue'
import App from './App'
import router from './router/router'
import store from './store/store'
import './assets/styles/reset.css'

new Vue({
  router,
  store,
  render:h =&gt; h(App)
}).$mount('#app')


构建store目录


src/store/store.js
可按须要将state、actions、mutations拆分出来


store.js



import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cur:'OFF',
  },
  actions: {
    changeCur (ctx,cur) {
      ctx.commit('changeCueMutations',cur)
    }
  },
  mutations: {
    changeCueMutations (state,cur) {
      cur == 'OFF' ? state.cur = 'ON' :state.cur = 'OFF'
    }
  }
})


11. 打包发布


webpack.config.js中若是配置项：mode:'development', build的结果是未通过压缩的很是的大
修改 package.json 中的scripts，将打包时的mode切换成production



  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
    "dev": "webpack-dev-server --hot --open",
    "build": "webpack --mode production --progress --hide-modules"
  },


文档汇总


webpack相关


            
            
            
          
           

             webpack官方文档： 
            https://webpack.docschina.org/ 
            
webpack安装： 
            https://webpack.docschina.org... 
            
webpack-dev-server： 
            https://webpack.docschina.org... 
            
webpack配置： 
            https://webpack.docschina.org... 
            
webpack命令行接口： 
            https://webpack.docschina.org... 
            
webpack解析（resolve）： 
            https://webpack.docschina.org... 
            
webpack - loader： 
            https://webpack.docschina.org... 
            
webpack - module： 
            https://webpack.docschina.org... 
           


Vue相关


            
            
            
          
           

             Vue官方文档（中文）： 
            https://cn.vuejs.org/ 
            
Vue-cli: 
            https://cli.vuejs.org/zh/guide/ 
            
Vue-router: 
            https://router.vuejs.org/ 
            
Vuex: 
            https://vuex.vuejs.org/ 
            
Vue-loader(单文件组件): 
            https://vue-loader.vuejs.org/ 
           


babel相关


            
            
            
          
           

             babel官方文档： 
            https://babel.docschina.org/ 
            
babel使用指南： 
            https://babel.docschina.org/d... 
            
babel的配置： 
            https://babel.docschina.org/s... 
            
babel-env： 
            https://babel.docschina.org/d... 
           


其余


            
            
            
          
           

             npm官方： 
            https://www.npmjs.com/ 
            
npm CLI（命令行指令）： 
            https://docs.npmjs.com/ 
            
vue-style-loader: 
            https://www.npmjs.com/package... 
            
node-sass: 
            https://www.npmjs.com/search?... 
           



<h2>1. 项目初始化</h2>
<h3>初始化项目</h3>
<p>在项目目录下初始化项目会获得package.json文件：</p>
<pre><code class="coffeescript">npm initnpm i webpack webpack-dev-server webpack-cli --save-dev
 npm i vue --save

<h3>配置webpack.config.js</h3>
<p>根目录下新建webpack的配置文件webpack.config.js。<br>配置 入口、出口路径、打包后文件名和devServer的相关配置项</p>
<blockquote>使用一个webpack的配置文件：<a href="https://webpack.docschina.org/guides/getting-started/#%E4%BD%BF%E7%94%A8%E4%B8%80%E4%B8%AA%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6" rel="nofollow noreferrer">https://webpack.docschina.org...</a>
</blockquote>



var path = require('path');
 var webpack = require('webpack');vuex


module.exports = {
 //项目入口文件
 entry: './src/main.js',
 output: {
 //打包出口路径
 path: path.resolve(__dirname, './dist'),
 //经过devServer访问路径
 publicPath: '/dist/',
 //打包后的文件名
 filename: 'main.js'
 },
 mode:'development',
 devServer: {
 historyApiFallback: true,
 overlay: true
 }
 };


```


根目录下新建index.html（模板以下）


新建index.html做为项目的主体页面，留出入口文件，入口文件的路径为webpack打包后输出的路径。


```<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>webpack-vue</title>
 <meta name="description" content="">
 <meta name="keywords" content="">
 </head>
 <body>
 <script src="/dist/main.js"></script>
 </body>
 </html>



<h3>新建入口文件</h3>
<p>新建在src目录用来存放各类组件和静态文件，在src目录下新建入口文件main.js</p>
<h2>2. webpack的准备工做</h2>
<p>为方便开发调试，打包以及后期的代码编写便捷，咱们须要对webpack进行初步配置</p>
<h3>自定义npm命令</h3>
<p>package.json 增长 scripts：</p>



"scripts": {
 "dev": "webpack-dev-server --hot --open",
 "build": "webpack --mode production --progress --hide-modules"
 },



<p>这一步的目的是简化在命令行中输入复杂指令的操做，如需执行上述两命令只须要在命令行执行：</p>
<pre><code class="coffeescript">npm run dev
npm run build


webpack-dev-server --hot --open目的是开启一个本地服务，--hot为热加载，可实视查看页面状态，--open直接从浏览器打开
webpack --mode production --progress --hide-modules是打包整个项目的指令，--mode production是以生产模式打包，这样会获得体积更小的文件，有兴趣的同窗能够试试不加这个指令，看看差距到底有多大。--progress打印出编译进度的百分比值，hide-modules隐藏关于模块的信息
webpack的全部命令行能够在 api-命令行接口（cli） 中找到


    
    
    

 

  
  webpack命令行接口： 
 
  https://webpack.docschina.org... 

 


配置webpack解析（resolve）


webpack.config.js中增长：




resolve: {
  //路径别名
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@':path.resolve(__dirname, './src'),
  },
  //路径别名自动解析肯定的扩展
  tensions: ['.js', '.vue', '.json']
},


resolve是webpack关于解析的配置项，alias容许你在项目中使用路径别名代替复杂的路径。
extensions会让webpack自动查找特定后缀的文件，在项目中引入文件时将没必要再书写文件后缀。
至于为什么将vue的路径别名指向vue/dist/vue.esm.js请看下一章节vue的内容。


    
    
    

 

  
  webpack解析（resolve）： 
 
  https://webpack.docschina.org... 

 


3. 引入Vue


这一步咱们先暂不考虑使用Vue的单页面组件。


经过查看 node_modules/vue/dist/README.md 咱们能够获得关于webpack配置的说明，引入vue其实是引用 node_modules/vue/dist/vue.esm.js，有理有据安心使用，而且会告诉你若是你在使用webpack 1.0应该引用vue.common.js，这即是上一步配置路径别名的依据。




在index.html中添加挂载点dom（#app）


```<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>webpack-vue</title>
 <meta name="description" content="">
 <meta name="keywords" content="">
 </head>
 <body>
 <div id="app">{{message}}</div>
 <script src="/dist/main.js"></script>
 </body>
 </html>



<h3>在main.js中引入vue</h3>



import Vue from 'vue'


var app = new Vue({
 el: "#app",
 data: {
 message: 'hello webpack!!'
 }
 })



<p>启动server，能够预览到页面显示 'hello webpack!!'。</p>
<pre><code class="coffeescript">npm run dev


4. 配置loader——使用 css/scss


webpack默认只能解析js文件，所以须要在webpack.config.js中配置相应的解析器。


安装scss和相应样式文件解析器


npm i node-sass css-loader vue-style-loader sass-loader –save-dev



<p>关于webpack解析样式的文档比较散乱，经过粗略查阅，<br><code>css-loader</code>用来解析css文件，<br><code>style-loader</code>用来解析dom中经过<code>&lt;style&gt;&lt;/style&gt;</code>注入的样式，<br>而<code>vue-style-loader</code>是vue官方基于style-loader开发的适用于vue的样式解析，<br><code>sass-loader</code>用来解析sass/scss文件</p>
<blockquote>webpack - loader：<a href="https://webpack.docschina.org/loaders/" rel="nofollow noreferrer">https://webpack.docschina.org...</a><br>vue-style-loader：<a href="https://www.npmjs.com/package/vue-style-loader" rel="nofollow noreferrer">https://www.npmjs.com/package...</a>
</blockquote>
<h3>在webpack.config.js中配置解析器</h3>



module: {
 rules: [{
 test: /.css$/,
 use: [
 'vue-style-loader',
 'css-loader'
 ]
 },{
 test: /.scss$/,
 use: [
 'vue-style-loader',
 'css-loader',
 'sass-loader'
 ]
 },
 {
 test: /.sass$/,
 use: [
 'vue-style-loader',
 'css-loader',
 'sass-loader?indentedSyntax'
 ]
 }]
 },



<p>以上配置意为：<br><code>.css</code>为后缀的文件使用<code>css-loader</code>, <code>vue-style-loader</code>解析<br><code>.scss</code>和<code>.sass</code>为后缀的文件使用<code>sass-loader</code>，<code>css-loader</code>, <code>vue-style-loader</code>解析<br>解析顺序是由下到上的</p>
<blockquote>webpack - module：<a href="https://webpack.docschina.org/configuration/module/#module-rules" rel="nofollow noreferrer">https://webpack.docschina.org...</a><br>webpack - sass-loader：<a href="https://webpack.docschina.org/loaders/sass-loader/" rel="nofollow noreferrer">https://webpack.docschina.org...</a>
</blockquote>
<h3>在项目中使用、引入样式（测试）</h3>
<p>在src目录下新建目录assets/styles存放统同样式，新建index.scss，写一段scss代码：</p>
<pre><code class="scss">$appColor:red;
#app{
  color:$appColor;
}



在main.js中引入样式：



import ‘./assets/styles/index.scss’


再次重启服务能够看到样式已经加载成功了


5. 配置loader——使用图片


一样webpack人没法解析图片格式的文件，须要把图片当作模块使用file-loader解析。


      
      
      
  
   

     file-loader： 
    https://webpack.docschina.org... 
   


安装file-loader


npm i file-loader --save-dev



<h3>在webpack.config.js中配置解析器</h3>



{
 test: /.(png|jpg|gif|svg)$/,
 loader: 'file-loader',
 options: {
 name: '[name].[ext]?[hash]'
 }
 }



<h3>在项目中引入图片（测试）</h3>
<p>在src目录下按照代码中路径准备一张图片</p>



Vue.component('myComponent', {
 template: '<img :src="url" />',
 data() {
 return {
 url: require('./assets/images/logo.png')
 }
 }
 })


```


在index.html中使用该组件


```<div id="app">
 {{message}}
 <my-component></my-component>
 </div>



<p>重启服务，图片应该被成功加载了。</p>
<h2>6. 配置loader——使用babel</h2>
<p>babel可让咱们在项目中自由的使用es6语法，他会为咱们将es6语法编译成浏览器广泛通用的es5语法。<br>在此以前咱们必需要对babel有必定的了解：</p>
<blockquote>babel官方文档：<a href="https://babel.docschina.org/docs/en/usage" rel="nofollow noreferrer">https://babel.docschina.org/d...</a>
</blockquote>
<p>在babel的使用指南中咱们看到安装babel须要安装的依赖和配置babel的方法。<br>而且咱们得知一个噩耗，babel从7.0开始与以前版本有写不兼容了。若是你的package.json中babel的版本混乱，很容易形成配置失败。</p>
<h3>安装babel</h3>
<pre><code class="coffeescript">npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill


注意：


        
        
        
    
     
     
      
  • 其中preset是babel的配置，babel-loader在webpack中解析babel中会用到，polyfill也是babel的一个依赖
    •  
      
  • babel的6.0 和7.0不兼容，若是package.json中版本混乱建议降级活升级以统一版本
    •  
     


在webpack.config.js中配置解析器


        
        
        
    
     

       babel的webpack配置： 
      https://babel.docschina.org/s... 选择webpack 
     


module增长一条rules:



{
  test: /\.js$/, exclude: /node_modules/,
  loader: "babel-loader"
}



入口文件更改成：



entry: ["@babel/polyfill", './src/main.js'],


新建配置文件.babelrc


注意查看关于env的配置文档，新版本写法有变化。


        
        
        
    
     

       @babel/preset-env: 
      https://babel.docschina.org/d... 
     



{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}



检测es6语法（正常运行说明babel配置成功）


在src下新建util.js



export default function getData() {
    return new Promise((resolve, reject) =&gt; {
        resolve('ok');
    })
}



main.js



//引入组件
import getData from './util';

var app = new Vue({
  el: "#app",
  data: {
    message: 'hello webpack!!'
  },
  methods: {
    async fetchData() {
      const data = await getData();
      this.message = data;
    }
  },
  created() {
    this.fetchData();
  }
})


import getData from './util';


常见报错


        
        
        
    
     
     
      
  1.  Can't resolve 'babel-polyfill' in 'E:\vue\webpack-vue'
    webpack的入口文件polyfill版本与配置写法不匹配
    错误：entry: ["babel-polyfill", './src/main.js'],
    正确：entry: ["@babel/polyfill", './src/main.js'],
    2.  
      
  2.  regeneratorRuntime is not defined
    未安装@babel/polyfill
    npm i babel-polyfill –save
    3.  
      
  3.  Plugin/Preset files are not allowed to export objects
    webpack的报错，版本混乱，不兼容
    清理package.json中的babel依赖，删除node_module，从新执行npm install，再次安装babel依赖时注意版本统一
    4.  
     


7. 使用Vue单文件组件


vue-loader中介绍了如何使用Vue单文件组件:


        
        
        
    
     

       vue-loader: 
      https://vue-loader.vuejs.org/zh/ 
     


安装vue-loader及依赖


npm i vue-loader vue-template-compiler –save-dev



<h3>配置webpack.config.js</h3>
<blockquote>Vue单文件组件：<a href="https://vue-loader.vuejs.org/zh/guide/" rel="nofollow noreferrer">https://vue-loader.vuejs.org/...</a>
</blockquote>



// webpack.config.js
 const VueLoaderPlugin = require('vue-loader/lib/plugin')


module.exports = {
 module: {
 rules: [
 // ... 其它规则
 {
 test: /.vue$/,
 loader: 'vue-loader'
 }
 ]
 },
 plugins: [
 // 请确保引入这个插件！
 new VueLoaderPlugin()
 ]
 }
 ```


准备单文件组件


在src目录下建立文件App.vue
在src目录下新建目录components用来存放单文件组件，新建文件header.vue


App.vue


  &lt;div&gt;
    &lt;home-header user="vict"&gt;&lt;/home-header&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  import homeHeader from '@/components/header.vue'
  export default {
    name:'app',
    components:{
      homeHeader
    }
  }
&lt;/script&gt;

&lt;style lang="scss" scoped&gt;
  $txtColor:red;
  .sg{
    color:$txtColor
  }
&lt;/style&gt;



header.vue（子组件）



&lt;template&gt;
  &lt;div&gt;
    header
    &lt;span&gt;color&lt;/span&gt;
    &lt;img src="@/assets/images/logo.png"&gt;
    {{this.message}} - {{this.user}}
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  export default {
    name:'homeHeader',
    data () {
      return {
        message:'hello world'
      }
    },
    props: {
      user:String
    }
  }
&lt;/script&gt;

&lt;style lang="scss" scoped&gt;
  span{
    color:green
  }
&lt;/style&gt;


main.js



import Vue from 'vue'
import App from './App.vue'
import './assets/styles/index.scss'

new Vue({
  render:h =&gt; h(App)
}).$mount('#app')


8. 解决静态文件


在.vue中url路径将被解析成webpack模块请求，
这里建议在webpack.config.js中配置路径别名以方便在单文件组件中引用图片等静态资源
在单文件组件中能够这样使用：


&lt;img src="@/assets/images/logo.png"&gt;


9. 注入Vue Router


          
          
          
      
       

         vue-router: 
        https://router.vuejs.org/zh/ 
       


安装VueRouter


npm i vue-router –save



<h3>在main.js的Vue实例中注入Router</h3>



import Vue from 'vue'
 import App from './App'
 //引入router组件
 import router from './router/router'
 import './assets/styles/reset.css'


new Vue({
 //注入router
 router,
 render:h => h(App)
 }).$mount('#app')



<h3>构建router组件</h3>
<p>按照路径建立router文件：src/router/router.js</p>
<p>router.js</p>



import Vue from 'vue'
 import VueRouter from 'vue-router'


import Page1 from '@/components/page1'
 import Page2 from '@/components/page2'


Vue.use(VueRouter)
 export default new VueRouter({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: [{
 path: '/',
 name:'home',
 component: Page1
 },{
 path: '/page2',
 name:'page2',
 component: Page2
 }]
 })



<p><em>常见的渲染失败的缘由：</em></p>
<ul>
<li><em>router实例的路由配置项 routes，不要误写成 routers</em></li>
<li><em>routes配置项中必需要有路径为’/’，不然渲染失败</em></li>
</ul>
<h3>使用router</h3>
<p>在App.vue中能够直接使用<code>&lt;router-view&gt;</code>和<code>&lt;router-link&gt;</code>标签</p>
<h2>10. 注入Vuex</h2>
<blockquote>vuex: <a href="https://vuex.vuejs.org/zh/guide/" rel="nofollow noreferrer">https://vuex.vuejs.org/zh/guide/</a>
</blockquote>
<h3>安装vuex</h3>
<pre><code class="coffeescript">npm i vuex –save


在main.js的Vue实例中注入store



import Vue from 'vue'
import App from './App'
import router from './router/router'
import store from './store/store'
import './assets/styles/reset.css'

new Vue({
  router,
  store,
  render:h =&gt; h(App)
}).$mount('#app')


构建store目录


src/store/store.js
可按须要将state、actions、mutations拆分出来


store.js



import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cur:'OFF',
  },
  actions: {
    changeCur (ctx,cur) {
      ctx.commit('changeCueMutations',cur)
    }
  },
  mutations: {
    changeCueMutations (state,cur) {
      cur == 'OFF' ? state.cur = 'ON' :state.cur = 'OFF'
    }
  }
})


11. 打包发布


webpack.config.js中若是配置项：mode:'development', build的结果是未通过压缩的很是的大
修改 package.json 中的scripts，将打包时的mode切换成production



  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
    "dev": "webpack-dev-server --hot --open",
    "build": "webpack --mode production --progress --hide-modules"
  },


文档汇总


webpack相关


            
            
            
        
         

           webpack官方文档： 
          https://webpack.docschina.org/ 
          
webpack安装： 
          https://webpack.docschina.org... 
          
webpack-dev-server： 
          https://webpack.docschina.org... 
          
webpack配置： 
          https://webpack.docschina.org... 
          
webpack命令行接口： 
          https://webpack.docschina.org... 
          
webpack解析（resolve）： 
          https://webpack.docschina.org... 
          
webpack - loader： 
          https://webpack.docschina.org... 
          
webpack - module： 
          https://webpack.docschina.org... 
         


Vue相关


            
            
            
        
         

           Vue官方文档（中文）： 
          https://cn.vuejs.org/ 
          
Vue-cli: 
          https://cli.vuejs.org/zh/guide/ 
          
Vue-router: 
          https://router.vuejs.org/ 
          
Vuex: 
          https://vuex.vuejs.org/ 
          
Vue-loader(单文件组件): 
          https://vue-loader.vuejs.org/ 
         


babel相关


            
            
            
        
         

           babel官方文档： 
          https://babel.docschina.org/ 
          
babel使用指南： 
          https://babel.docschina.org/d... 
          
babel的配置： 
          https://babel.docschina.org/s... 
          
babel-env： 
          https://babel.docschina.org/d... 
         


其余


            
            
            
        
         

           npm官方： 
          https://www.npmjs.com/ 
          
npm CLI（命令行指令）： 
          https://docs.npmjs.com/ 
          
vue-style-loader: 
          https://www.npmjs.com/package... 
          
node-sass: 
          https://www.npmjs.com/search?... 
         



<h3>配置webpack.config.js</h3>
<p>根目录下新建webpack的配置文件webpack.config.js。<br>配置 入口、出口路径、打包后文件名和devServer的相关配置项</p>
<blockquote>使用一个webpack的配置文件：<a href="https://webpack.docschina.org/guides/getting-started/#%E4%BD%BF%E7%94%A8%E4%B8%80%E4%B8%AA%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6" rel="nofollow noreferrer">https://webpack.docschina.org...</a>
</blockquote><h3>新建入口文件</h3>
<p>新建在src目录用来存放各类组件和静态文件，在src目录下新建入口文件main.js</p>
<h2>2. webpack的准备工做</h2>
<p>为方便开发调试，打包以及后期的代码编写便捷，咱们须要对webpack进行初步配置</p>
<h3>自定义npm命令</h3>
<p>package.json 增长 scripts：</p><p>这一步的目的是简化在命令行中输入复杂指令的操做，如需执行上述两命令只须要在命令行执行：</p>
<pre><code class="coffeescript">npm run dev
npm run buildwebpack-dev-server --hot --open--hot--openwebpack --mode production --progress --hide-modules--mode production--progresshide-modulesresolve: {
  //路径别名
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@':path.resolve(__dirname, './src'),
  },
  //路径别名自动解析肯定的扩展
  tensions: ['.js', '.vue', '.json']
},resolvealiasextensionsvue/dist/vue.esm.js<h3>在main.js中引入vue</h3><p>启动server，能够预览到页面显示 'hello webpack!!'。</p>
<pre><code class="coffeescript">npm run devnpm i node-sass css-loader vue-style-loader sass-loader –save-dev

<p>关于webpack解析样式的文档比较散乱，经过粗略查阅，<br><code>css-loader</code>用来解析css文件，<br><code>style-loader</code>用来解析dom中经过<code>&lt;style&gt;&lt;/style&gt;</code>注入的样式，<br>而<code>vue-style-loader</code>是vue官方基于style-loader开发的适用于vue的样式解析，<br><code>sass-loader</code>用来解析sass/scss文件</p>
<blockquote>webpack - loader：<a href="https://webpack.docschina.org/loaders/" rel="nofollow noreferrer">https://webpack.docschina.org...</a><br>vue-style-loader：<a href="https://www.npmjs.com/package/vue-style-loader" rel="nofollow noreferrer">https://www.npmjs.com/package...</a>
</blockquote>
<h3>在webpack.config.js中配置解析器</h3>



module: {
 rules: [{
 test: /.css$/,
 use: [
 'vue-style-loader',
 'css-loader'
 ]
 },{
 test: /.scss$/,
 use: [
 'vue-style-loader',
 'css-loader',
 'sass-loader'
 ]
 },
 {
 test: /.sass$/,
 use: [
 'vue-style-loader',
 'css-loader',
 'sass-loader?indentedSyntax'
 ]
 }]
 },



<p>以上配置意为：<br><code>.css</code>为后缀的文件使用<code>css-loader</code>, <code>vue-style-loader</code>解析<br><code>.scss</code>和<code>.sass</code>为后缀的文件使用<code>sass-loader</code>，<code>css-loader</code>, <code>vue-style-loader</code>解析<br>解析顺序是由下到上的</p>
<blockquote>webpack - module：<a href="https://webpack.docschina.org/configuration/module/#module-rules" rel="nofollow noreferrer">https://webpack.docschina.org...</a><br>webpack - sass-loader：<a href="https://webpack.docschina.org/loaders/sass-loader/" rel="nofollow noreferrer">https://webpack.docschina.org...</a>
</blockquote>
<h3>在项目中使用、引入样式（测试）</h3>
<p>在src目录下新建目录assets/styles存放统同样式，新建index.scss，写一段scss代码：</p>
<pre><code class="scss">$appColor:red;
#app{
  color:$appColor;
}



在main.js中引入样式：



import ‘./assets/styles/index.scss’


再次重启服务能够看到样式已经加载成功了


5. 配置loader——使用图片


一样webpack人没法解析图片格式的文件，须要把图片当作模块使用file-loader解析。


      
      
      

 

  
  file-loader： 
 
  https://webpack.docschina.org... 

 


安装file-loader


npm i file-loader --save-dev



<h3>在webpack.config.js中配置解析器</h3>



{
 test: /.(png|jpg|gif|svg)$/,
 loader: 'file-loader',
 options: {
 name: '[name].[ext]?[hash]'
 }
 }



<h3>在项目中引入图片（测试）</h3>
<p>在src目录下按照代码中路径准备一张图片</p>



Vue.component('myComponent', {
 template: '<img :src="url" />',
 data() {
 return {
 url: require('./assets/images/logo.png')
 }
 }
 })


```


在index.html中使用该组件


```<div id="app">
 {{message}}
 <my-component></my-component>
 </div>



<p>重启服务，图片应该被成功加载了。</p>
<h2>6. 配置loader——使用babel</h2>
<p>babel可让咱们在项目中自由的使用es6语法，他会为咱们将es6语法编译成浏览器广泛通用的es5语法。<br>在此以前咱们必需要对babel有必定的了解：</p>
<blockquote>babel官方文档：<a href="https://babel.docschina.org/docs/en/usage" rel="nofollow noreferrer">https://babel.docschina.org/d...</a>
</blockquote>
<p>在babel的使用指南中咱们看到安装babel须要安装的依赖和配置babel的方法。<br>而且咱们得知一个噩耗，babel从7.0开始与以前版本有写不兼容了。若是你的package.json中babel的版本混乱，很容易形成配置失败。</p>
<h3>安装babel</h3>
<pre><code class="coffeescript">npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill


注意：


        
        
        
  
   
     
    
  • 其中preset是babel的配置，babel-loader在webpack中解析babel中会用到，polyfill也是babel的一个依赖
    •  
    
  • babel的6.0 和7.0不兼容，若是package.json中版本混乱建议降级活升级以统一版本
    •  
   


在webpack.config.js中配置解析器


        
        
        
  
   

     babel的webpack配置： 
    https://babel.docschina.org/s... 选择webpack 
   


module增长一条rules:



{
  test: /\.js$/, exclude: /node_modules/,
  loader: "babel-loader"
}



入口文件更改成：



entry: ["@babel/polyfill", './src/main.js'],


新建配置文件.babelrc


注意查看关于env的配置文档，新版本写法有变化。


        
        
        
  
   

     @babel/preset-env: 
    https://babel.docschina.org/d... 
   



{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}



检测es6语法（正常运行说明babel配置成功）


在src下新建util.js



export default function getData() {
    return new Promise((resolve, reject) =&gt; {
        resolve('ok');
    })
}



main.js



//引入组件
import getData from './util';

var app = new Vue({
  el: "#app",
  data: {
    message: 'hello webpack!!'
  },
  methods: {
    async fetchData() {
      const data = await getData();
      this.message = data;
    }
  },
  created() {
    this.fetchData();
  }
})


import getData from './util';


常见报错


        
        
        
  
   
     
    
  1.  Can't resolve 'babel-polyfill' in 'E:\vue\webpack-vue'
    webpack的入口文件polyfill版本与配置写法不匹配
    错误：entry: ["babel-polyfill", './src/main.js'],
    正确：entry: ["@babel/polyfill", './src/main.js'],
    2.  
    
  2.  regeneratorRuntime is not defined
    未安装@babel/polyfill
    npm i babel-polyfill –save
    3.  
    
  3.  Plugin/Preset files are not allowed to export objects
    webpack的报错，版本混乱，不兼容
    清理package.json中的babel依赖，删除node_module，从新执行npm install，再次安装babel依赖时注意版本统一
    4.  
   


7. 使用Vue单文件组件


vue-loader中介绍了如何使用Vue单文件组件:


        
        
        
  
   

     vue-loader: 
    https://vue-loader.vuejs.org/zh/ 
   


安装vue-loader及依赖


npm i vue-loader vue-template-compiler –save-dev



<h3>配置webpack.config.js</h3>
<blockquote>Vue单文件组件：<a href="https://vue-loader.vuejs.org/zh/guide/" rel="nofollow noreferrer">https://vue-loader.vuejs.org/...</a>
</blockquote>



// webpack.config.js
 const VueLoaderPlugin = require('vue-loader/lib/plugin')


module.exports = {
 module: {
 rules: [
 // ... 其它规则
 {
 test: /.vue$/,
 loader: 'vue-loader'
 }
 ]
 },
 plugins: [
 // 请确保引入这个插件！
 new VueLoaderPlugin()
 ]
 }
 ```


准备单文件组件


在src目录下建立文件App.vue
在src目录下新建目录components用来存放单文件组件，新建文件header.vue


App.vue


  &lt;div&gt;
    &lt;home-header user="vict"&gt;&lt;/home-header&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  import homeHeader from '@/components/header.vue'
  export default {
    name:'app',
    components:{
      homeHeader
    }
  }
&lt;/script&gt;

&lt;style lang="scss" scoped&gt;
  $txtColor:red;
  .sg{
    color:$txtColor
  }
&lt;/style&gt;



header.vue（子组件）



&lt;template&gt;
  &lt;div&gt;
    header
    &lt;span&gt;color&lt;/span&gt;
    &lt;img src="@/assets/images/logo.png"&gt;
    {{this.message}} - {{this.user}}
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  export default {
    name:'homeHeader',
    data () {
      return {
        message:'hello world'
      }
    },
    props: {
      user:String
    }
  }
&lt;/script&gt;

&lt;style lang="scss" scoped&gt;
  span{
    color:green
  }
&lt;/style&gt;


main.js



import Vue from 'vue'
import App from './App.vue'
import './assets/styles/index.scss'

new Vue({
  render:h =&gt; h(App)
}).$mount('#app')


8. 解决静态文件


在.vue中url路径将被解析成webpack模块请求，
这里建议在webpack.config.js中配置路径别名以方便在单文件组件中引用图片等静态资源
在单文件组件中能够这样使用：


&lt;img src="@/assets/images/logo.png"&gt;


9. 注入Vue Router


          
          
          
    
     

       vue-router: 
      https://router.vuejs.org/zh/ 
     


安装VueRouter


npm i vue-router –save



<h3>在main.js的Vue实例中注入Router</h3>



import Vue from 'vue'
 import App from './App'
 //引入router组件
 import router from './router/router'
 import './assets/styles/reset.css'


new Vue({
 //注入router
 router,
 render:h => h(App)
 }).$mount('#app')



<h3>构建router组件</h3>
<p>按照路径建立router文件：src/router/router.js</p>
<p>router.js</p>



import Vue from 'vue'
 import VueRouter from 'vue-router'


import Page1 from '@/components/page1'
 import Page2 from '@/components/page2'


Vue.use(VueRouter)
 export default new VueRouter({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: [{
 path: '/',
 name:'home',
 component: Page1
 },{
 path: '/page2',
 name:'page2',
 component: Page2
 }]
 })



<p><em>常见的渲染失败的缘由：</em></p>
<ul>
<li><em>router实例的路由配置项 routes，不要误写成 routers</em></li>
<li><em>routes配置项中必需要有路径为’/’，不然渲染失败</em></li>
</ul>
<h3>使用router</h3>
<p>在App.vue中能够直接使用<code>&lt;router-view&gt;</code>和<code>&lt;router-link&gt;</code>标签</p>
<h2>10. 注入Vuex</h2>
<blockquote>vuex: <a href="https://vuex.vuejs.org/zh/guide/" rel="nofollow noreferrer">https://vuex.vuejs.org/zh/guide/</a>
</blockquote>
<h3>安装vuex</h3>
<pre><code class="coffeescript">npm i vuex –save


在main.js的Vue实例中注入store



import Vue from 'vue'
import App from './App'
import router from './router/router'
import store from './store/store'
import './assets/styles/reset.css'

new Vue({
  router,
  store,
  render:h =&gt; h(App)
}).$mount('#app')


构建store目录


src/store/store.js
可按须要将state、actions、mutations拆分出来


store.js



import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cur:'OFF',
  },
  actions: {
    changeCur (ctx,cur) {
      ctx.commit('changeCueMutations',cur)
    }
  },
  mutations: {
    changeCueMutations (state,cur) {
      cur == 'OFF' ? state.cur = 'ON' :state.cur = 'OFF'
    }
  }
})


11. 打包发布


webpack.config.js中若是配置项：mode:'development', build的结果是未通过压缩的很是的大
修改 package.json 中的scripts，将打包时的mode切换成production



  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
    "dev": "webpack-dev-server --hot --open",
    "build": "webpack --mode production --progress --hide-modules"
  },


文档汇总


webpack相关


            
            
            
      
       

         webpack官方文档： 
        https://webpack.docschina.org/ 
        
webpack安装： 
        https://webpack.docschina.org... 
        
webpack-dev-server： 
        https://webpack.docschina.org... 
        
webpack配置： 
        https://webpack.docschina.org... 
        
webpack命令行接口： 
        https://webpack.docschina.org... 
        
webpack解析（resolve）： 
        https://webpack.docschina.org... 
        
webpack - loader： 
        https://webpack.docschina.org... 
        
webpack - module： 
        https://webpack.docschina.org... 
       


Vue相关


            
            
            
      
       

         Vue官方文档（中文）： 
        https://cn.vuejs.org/ 
        
Vue-cli: 
        https://cli.vuejs.org/zh/guide/ 
        
Vue-router: 
        https://router.vuejs.org/ 
        
Vuex: 
        https://vuex.vuejs.org/ 
        
Vue-loader(单文件组件): 
        https://vue-loader.vuejs.org/ 
       


babel相关


            
            
            
      
       

         babel官方文档： 
        https://babel.docschina.org/ 
        
babel使用指南： 
        https://babel.docschina.org/d... 
        
babel的配置： 
        https://babel.docschina.org/s... 
        
babel-env： 
        https://babel.docschina.org/d... 
       


其余


            
            
            
      
       

         npm官方： 
        https://www.npmjs.com/ 
        
npm CLI（命令行指令）： 
        https://docs.npmjs.com/ 
        
vue-style-loader: 
        https://www.npmjs.com/package... 
        
node-sass: 
        https://www.npmjs.com/search?... 
       



<p>关于webpack解析样式的文档比较散乱，经过粗略查阅，<br><code>css-loader</code>用来解析css文件，<br><code>style-loader</code>用来解析dom中经过<code>&lt;style&gt;&lt;/style&gt;</code>注入的样式，<br>而<code>vue-style-loader</code>是vue官方基于style-loader开发的适用于vue的样式解析，<br><code>sass-loader</code>用来解析sass/scss文件</p>
<blockquote>webpack - loader：<a href="https://webpack.docschina.org/loaders/" rel="nofollow noreferrer">https://webpack.docschina.org...</a><br>vue-style-loader：<a href="https://www.npmjs.com/package/vue-style-loader" rel="nofollow noreferrer">https://www.npmjs.com/package...</a>
</blockquote>
<h3>在webpack.config.js中配置解析器</h3><p>以上配置意为：<br><code>.css</code>为后缀的文件使用<code>css-loader</code>, <code>vue-style-loader</code>解析<br><code>.scss</code>和<code>.sass</code>为后缀的文件使用<code>sass-loader</code>，<code>css-loader</code>, <code>vue-style-loader</code>解析<br>解析顺序是由下到上的</p>
<blockquote>webpack - module：<a href="https://webpack.docschina.org/configuration/module/#module-rules" rel="nofollow noreferrer">https://webpack.docschina.org...</a><br>webpack - sass-loader：<a href="https://webpack.docschina.org/loaders/sass-loader/" rel="nofollow noreferrer">https://webpack.docschina.org...</a>
</blockquote>
<h3>在项目中使用、引入样式（测试）</h3>
<p>在src目录下新建目录assets/styles存放统同样式，新建index.scss，写一段scss代码：</p>
<pre><code class="scss">$appColor:red;
#app{
  color:$appColor;
}import ‘./assets/styles/index.scss’npm i file-loader --save-dev

<h3>在webpack.config.js中配置解析器</h3>



{
 test: /.(png|jpg|gif|svg)$/,
 loader: 'file-loader',
 options: {
 name: '[name].[ext]?[hash]'
 }
 }



<h3>在项目中引入图片（测试）</h3>
<p>在src目录下按照代码中路径准备一张图片</p>



Vue.component('myComponent', {
 template: '<img :src="url" />',
 data() {
 return {
 url: require('./assets/images/logo.png')
 }
 }
 })


```


在index.html中使用该组件


```<div id="app">
 {{message}}
 <my-component></my-component>
 </div>



<p>重启服务，图片应该被成功加载了。</p>
<h2>6. 配置loader——使用babel</h2>
<p>babel可让咱们在项目中自由的使用es6语法，他会为咱们将es6语法编译成浏览器广泛通用的es5语法。<br>在此以前咱们必需要对babel有必定的了解：</p>
<blockquote>babel官方文档：<a href="https://babel.docschina.org/docs/en/usage" rel="nofollow noreferrer">https://babel.docschina.org/d...</a>
</blockquote>
<p>在babel的使用指南中咱们看到安装babel须要安装的依赖和配置babel的方法。<br>而且咱们得知一个噩耗，babel从7.0开始与以前版本有写不兼容了。若是你的package.json中babel的版本混乱，很容易形成配置失败。</p>
<h3>安装babel</h3>
<pre><code class="coffeescript">npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill


注意：


        
        
        

 
     
 
  
  • 其中preset是babel的配置，babel-loader在webpack中解析babel中会用到，polyfill也是babel的一个依赖
    •  
 
  
  • babel的6.0 和7.0不兼容，若是package.json中版本混乱建议降级活升级以统一版本
    •  

 


在webpack.config.js中配置解析器


        
        
        

 

  
  babel的webpack配置： 
 
  https://babel.docschina.org/s... 选择webpack 

 


module增长一条rules:



{
  test: /\.js$/, exclude: /node_modules/,
  loader: "babel-loader"
}



入口文件更改成：



entry: ["@babel/polyfill", './src/main.js'],


新建配置文件.babelrc


注意查看关于env的配置文档，新版本写法有变化。


        
        
        

 

  
  @babel/preset-env: 
 
  https://babel.docschina.org/d... 

 



{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}



检测es6语法（正常运行说明babel配置成功）


在src下新建util.js



export default function getData() {
    return new Promise((resolve, reject) =&gt; {
        resolve('ok');
    })
}



main.js



//引入组件
import getData from './util';

var app = new Vue({
  el: "#app",
  data: {
    message: 'hello webpack!!'
  },
  methods: {
    async fetchData() {
      const data = await getData();
      this.message = data;
    }
  },
  created() {
    this.fetchData();
  }
})


import getData from './util';


常见报错


        
        
        

 
     
 
  
  1.  Can't resolve 'babel-polyfill' in 'E:\vue\webpack-vue'
    webpack的入口文件polyfill版本与配置写法不匹配
    错误：entry: ["babel-polyfill", './src/main.js'],
    正确：entry: ["@babel/polyfill", './src/main.js'],
    2.  
 
  
  2.  regeneratorRuntime is not defined
    未安装@babel/polyfill
    npm i babel-polyfill –save
    3.  
 
  
  3.  Plugin/Preset files are not allowed to export objects
    webpack的报错，版本混乱，不兼容
    清理package.json中的babel依赖，删除node_module，从新执行npm install，再次安装babel依赖时注意版本统一
    4.  

 


7. 使用Vue单文件组件


vue-loader中介绍了如何使用Vue单文件组件:


        
        
        

 

  
  vue-loader: 
 
  https://vue-loader.vuejs.org/zh/ 

 


安装vue-loader及依赖


npm i vue-loader vue-template-compiler –save-dev



<h3>配置webpack.config.js</h3>
<blockquote>Vue单文件组件：<a href="https://vue-loader.vuejs.org/zh/guide/" rel="nofollow noreferrer">https://vue-loader.vuejs.org/...</a>
</blockquote>



// webpack.config.js
 const VueLoaderPlugin = require('vue-loader/lib/plugin')


module.exports = {
 module: {
 rules: [
 // ... 其它规则
 {
 test: /.vue$/,
 loader: 'vue-loader'
 }
 ]
 },
 plugins: [
 // 请确保引入这个插件！
 new VueLoaderPlugin()
 ]
 }
 ```


准备单文件组件


在src目录下建立文件App.vue
在src目录下新建目录components用来存放单文件组件，新建文件header.vue


App.vue


  &lt;div&gt;
    &lt;home-header user="vict"&gt;&lt;/home-header&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  import homeHeader from '@/components/header.vue'
  export default {
    name:'app',
    components:{
      homeHeader
    }
  }
&lt;/script&gt;

&lt;style lang="scss" scoped&gt;
  $txtColor:red;
  .sg{
    color:$txtColor
  }
&lt;/style&gt;



header.vue（子组件）



&lt;template&gt;
  &lt;div&gt;
    header
    &lt;span&gt;color&lt;/span&gt;
    &lt;img src="@/assets/images/logo.png"&gt;
    {{this.message}} - {{this.user}}
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  export default {
    name:'homeHeader',
    data () {
      return {
        message:'hello world'
      }
    },
    props: {
      user:String
    }
  }
&lt;/script&gt;

&lt;style lang="scss" scoped&gt;
  span{
    color:green
  }
&lt;/style&gt;


main.js



import Vue from 'vue'
import App from './App.vue'
import './assets/styles/index.scss'

new Vue({
  render:h =&gt; h(App)
}).$mount('#app')


8. 解决静态文件


在.vue中url路径将被解析成webpack模块请求，
这里建议在webpack.config.js中配置路径别名以方便在单文件组件中引用图片等静态资源
在单文件组件中能够这样使用：


&lt;img src="@/assets/images/logo.png"&gt;


9. 注入Vue Router


          
          
          
  
   

     vue-router: 
    https://router.vuejs.org/zh/ 
   


安装VueRouter


npm i vue-router –save



<h3>在main.js的Vue实例中注入Router</h3>



import Vue from 'vue'
 import App from './App'
 //引入router组件
 import router from './router/router'
 import './assets/styles/reset.css'


new Vue({
 //注入router
 router,
 render:h => h(App)
 }).$mount('#app')



<h3>构建router组件</h3>
<p>按照路径建立router文件：src/router/router.js</p>
<p>router.js</p>



import Vue from 'vue'
 import VueRouter from 'vue-router'


import Page1 from '@/components/page1'
 import Page2 from '@/components/page2'


Vue.use(VueRouter)
 export default new VueRouter({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: [{
 path: '/',
 name:'home',
 component: Page1
 },{
 path: '/page2',
 name:'page2',
 component: Page2
 }]
 })



<p><em>常见的渲染失败的缘由：</em></p>
<ul>
<li><em>router实例的路由配置项 routes，不要误写成 routers</em></li>
<li><em>routes配置项中必需要有路径为’/’，不然渲染失败</em></li>
</ul>
<h3>使用router</h3>
<p>在App.vue中能够直接使用<code>&lt;router-view&gt;</code>和<code>&lt;router-link&gt;</code>标签</p>
<h2>10. 注入Vuex</h2>
<blockquote>vuex: <a href="https://vuex.vuejs.org/zh/guide/" rel="nofollow noreferrer">https://vuex.vuejs.org/zh/guide/</a>
</blockquote>
<h3>安装vuex</h3>
<pre><code class="coffeescript">npm i vuex –save


在main.js的Vue实例中注入store



import Vue from 'vue'
import App from './App'
import router from './router/router'
import store from './store/store'
import './assets/styles/reset.css'

new Vue({
  router,
  store,
  render:h =&gt; h(App)
}).$mount('#app')


构建store目录


src/store/store.js
可按须要将state、actions、mutations拆分出来


store.js



import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cur:'OFF',
  },
  actions: {
    changeCur (ctx,cur) {
      ctx.commit('changeCueMutations',cur)
    }
  },
  mutations: {
    changeCueMutations (state,cur) {
      cur == 'OFF' ? state.cur = 'ON' :state.cur = 'OFF'
    }
  }
})


11. 打包发布


webpack.config.js中若是配置项：mode:'development', build的结果是未通过压缩的很是的大
修改 package.json 中的scripts，将打包时的mode切换成production



  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
    "dev": "webpack-dev-server --hot --open",
    "build": "webpack --mode production --progress --hide-modules"
  },


文档汇总


webpack相关


            
            
            
    
     

       webpack官方文档： 
      https://webpack.docschina.org/ 
      
webpack安装： 
      https://webpack.docschina.org... 
      
webpack-dev-server： 
      https://webpack.docschina.org... 
      
webpack配置： 
      https://webpack.docschina.org... 
      
webpack命令行接口： 
      https://webpack.docschina.org... 
      
webpack解析（resolve）： 
      https://webpack.docschina.org... 
      
webpack - loader： 
      https://webpack.docschina.org... 
      
webpack - module： 
      https://webpack.docschina.org... 
     


Vue相关


            
            
            
    
     

       Vue官方文档（中文）： 
      https://cn.vuejs.org/ 
      
Vue-cli: 
      https://cli.vuejs.org/zh/guide/ 
      
Vue-router: 
      https://router.vuejs.org/ 
      
Vuex: 
      https://vuex.vuejs.org/ 
      
Vue-loader(单文件组件): 
      https://vue-loader.vuejs.org/ 
     


babel相关


            
            
            
    
     

       babel官方文档： 
      https://babel.docschina.org/ 
      
babel使用指南： 
      https://babel.docschina.org/d... 
      
babel的配置： 
      https://babel.docschina.org/s... 
      
babel-env： 
      https://babel.docschina.org/d... 
     


其余


            
            
            
    
     

       npm官方： 
      https://www.npmjs.com/ 
      
npm CLI（命令行指令）： 
      https://docs.npmjs.com/ 
      
vue-style-loader: 
      https://www.npmjs.com/package... 
      
node-sass: 
      https://www.npmjs.com/search?... 
     



<h3>在webpack.config.js中配置解析器</h3><h3>在项目中引入图片（测试）</h3>
<p>在src目录下按照代码中路径准备一张图片</p><p>重启服务，图片应该被成功加载了。</p>
<h2>6. 配置loader——使用babel</h2>
<p>babel可让咱们在项目中自由的使用es6语法，他会为咱们将es6语法编译成浏览器广泛通用的es5语法。<br>在此以前咱们必需要对babel有必定的了解：</p>
<blockquote>babel官方文档：<a href="https://babel.docschina.org/docs/en/usage" rel="nofollow noreferrer">https://babel.docschina.org/d...</a>
</blockquote>
<p>在babel的使用指南中咱们看到安装babel须要安装的依赖和配置babel的方法。<br>而且咱们得知一个噩耗，babel从7.0开始与以前版本有写不兼容了。若是你的package.json中babel的版本混乱，很容易形成配置失败。</p>
<h3>安装babel</h3>
<pre><code class="coffeescript">npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill{
  test: /\.js$/, exclude: /node_modules/,
  loader: "babel-loader"
}entry: ["@babel/polyfill", './src/main.js'],{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}export default function getData() {
    return new Promise((resolve, reject) =&gt; {
        resolve('ok');
    })
}//引入组件
import getData from './util';

var app = new Vue({
  el: "#app",
  data: {
    message: 'hello webpack!!'
  },
  methods: {
    async fetchData() {
      const data = await getData();
      this.message = data;
    }
  },
  created() {
    this.fetchData();
  }
})Can't resolve 'babel-polyfill' in 'E:\vue\webpack-vue'regeneratorRuntime is not definedPlugin/Preset files are not allowed to export objectsnpm i vue-loader vue-template-compiler –save-dev

<h3>配置webpack.config.js</h3>
<blockquote>Vue单文件组件：<a href="https://vue-loader.vuejs.org/zh/guide/" rel="nofollow noreferrer">https://vue-loader.vuejs.org/...</a>
</blockquote>



// webpack.config.js
 const VueLoaderPlugin = require('vue-loader/lib/plugin')


module.exports = {
 module: {
 rules: [
 // ... 其它规则
 {
 test: /.vue$/,
 loader: 'vue-loader'
 }
 ]
 },
 plugins: [
 // 请确保引入这个插件！
 new VueLoaderPlugin()
 ]
 }
 ```


准备单文件组件


在src目录下建立文件App.vue
在src目录下新建目录components用来存放单文件组件，新建文件header.vue


App.vue


  &lt;div&gt;
    &lt;home-header user="vict"&gt;&lt;/home-header&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  import homeHeader from '@/components/header.vue'
  export default {
    name:'app',
    components:{
      homeHeader
    }
  }
&lt;/script&gt;

&lt;style lang="scss" scoped&gt;
  $txtColor:red;
  .sg{
    color:$txtColor
  }
&lt;/style&gt;



header.vue（子组件）



&lt;template&gt;
  &lt;div&gt;
    header
    &lt;span&gt;color&lt;/span&gt;
    &lt;img src="@/assets/images/logo.png"&gt;
    {{this.message}} - {{this.user}}
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  export default {
    name:'homeHeader',
    data () {
      return {
        message:'hello world'
      }
    },
    props: {
      user:String
    }
  }
&lt;/script&gt;

&lt;style lang="scss" scoped&gt;
  span{
    color:green
  }
&lt;/style&gt;


main.js



import Vue from 'vue'
import App from './App.vue'
import './assets/styles/index.scss'

new Vue({
  render:h =&gt; h(App)
}).$mount('#app')


8. 解决静态文件


在.vue中url路径将被解析成webpack模块请求，
这里建议在webpack.config.js中配置路径别名以方便在单文件组件中引用图片等静态资源
在单文件组件中能够这样使用：


&lt;img src="@/assets/images/logo.png"&gt;


9. 注入Vue Router


          
          
          

 

  
  vue-router: 
 
  https://router.vuejs.org/zh/ 

 


安装VueRouter


npm i vue-router –save



<h3>在main.js的Vue实例中注入Router</h3>



import Vue from 'vue'
 import App from './App'
 //引入router组件
 import router from './router/router'
 import './assets/styles/reset.css'


new Vue({
 //注入router
 router,
 render:h => h(App)
 }).$mount('#app')



<h3>构建router组件</h3>
<p>按照路径建立router文件：src/router/router.js</p>
<p>router.js</p>



import Vue from 'vue'
 import VueRouter from 'vue-router'


import Page1 from '@/components/page1'
 import Page2 from '@/components/page2'


Vue.use(VueRouter)
 export default new VueRouter({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: [{
 path: '/',
 name:'home',
 component: Page1
 },{
 path: '/page2',
 name:'page2',
 component: Page2
 }]
 })



<p><em>常见的渲染失败的缘由：</em></p>
<ul>
<li><em>router实例的路由配置项 routes，不要误写成 routers</em></li>
<li><em>routes配置项中必需要有路径为’/’，不然渲染失败</em></li>
</ul>
<h3>使用router</h3>
<p>在App.vue中能够直接使用<code>&lt;router-view&gt;</code>和<code>&lt;router-link&gt;</code>标签</p>
<h2>10. 注入Vuex</h2>
<blockquote>vuex: <a href="https://vuex.vuejs.org/zh/guide/" rel="nofollow noreferrer">https://vuex.vuejs.org/zh/guide/</a>
</blockquote>
<h3>安装vuex</h3>
<pre><code class="coffeescript">npm i vuex –save


在main.js的Vue实例中注入store



import Vue from 'vue'
import App from './App'
import router from './router/router'
import store from './store/store'
import './assets/styles/reset.css'

new Vue({
  router,
  store,
  render:h =&gt; h(App)
}).$mount('#app')


构建store目录


src/store/store.js
可按须要将state、actions、mutations拆分出来


store.js



import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cur:'OFF',
  },
  actions: {
    changeCur (ctx,cur) {
      ctx.commit('changeCueMutations',cur)
    }
  },
  mutations: {
    changeCueMutations (state,cur) {
      cur == 'OFF' ? state.cur = 'ON' :state.cur = 'OFF'
    }
  }
})


11. 打包发布


webpack.config.js中若是配置项：mode:'development', build的结果是未通过压缩的很是的大
修改 package.json 中的scripts，将打包时的mode切换成production



  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
    "dev": "webpack-dev-server --hot --open",
    "build": "webpack --mode production --progress --hide-modules"
  },


文档汇总


webpack相关


            
            
            
  
   

     webpack官方文档： 
    https://webpack.docschina.org/ 
    
webpack安装： 
    https://webpack.docschina.org... 
    
webpack-dev-server： 
    https://webpack.docschina.org... 
    
webpack配置： 
    https://webpack.docschina.org... 
    
webpack命令行接口： 
    https://webpack.docschina.org... 
    
webpack解析（resolve）： 
    https://webpack.docschina.org... 
    
webpack - loader： 
    https://webpack.docschina.org... 
    
webpack - module： 
    https://webpack.docschina.org... 
   


Vue相关


            
            
            
  
   

     Vue官方文档（中文）： 
    https://cn.vuejs.org/ 
    
Vue-cli: 
    https://cli.vuejs.org/zh/guide/ 
    
Vue-router: 
    https://router.vuejs.org/ 
    
Vuex: 
    https://vuex.vuejs.org/ 
    
Vue-loader(单文件组件): 
    https://vue-loader.vuejs.org/ 
   


babel相关


            
            
            
  
   

     babel官方文档： 
    https://babel.docschina.org/ 
    
babel使用指南： 
    https://babel.docschina.org/d... 
    
babel的配置： 
    https://babel.docschina.org/s... 
    
babel-env： 
    https://babel.docschina.org/d... 
   


其余


            
            
            
  
   

     npm官方： 
    https://www.npmjs.com/ 
    
npm CLI（命令行指令）： 
    https://docs.npmjs.com/ 
    
vue-style-loader: 
    https://www.npmjs.com/package... 
    
node-sass: 
    https://www.npmjs.com/search?... 
   



<h3>配置webpack.config.js</h3>
<blockquote>Vue单文件组件：<a href="https://vue-loader.vuejs.org/zh/guide/" rel="nofollow noreferrer">https://vue-loader.vuejs.org/...</a>
</blockquote>&lt;div&gt;
    &lt;home-header user="vict"&gt;&lt;/home-header&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  import homeHeader from '@/components/header.vue'
  export default {
    name:'app',
    components:{
      homeHeader
    }
  }
&lt;/script&gt;

&lt;style lang="scss" scoped&gt;
  $txtColor:red;
  .sg{
    color:$txtColor
  }
&lt;/style&gt;&lt;template&gt;
  &lt;div&gt;
    header
    &lt;span&gt;color&lt;/span&gt;
    &lt;img src="@/assets/images/logo.png"&gt;
    {{this.message}} - {{this.user}}
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  export default {
    name:'homeHeader',
    data () {
      return {
        message:'hello world'
      }
    },
    props: {
      user:String
    }
  }
&lt;/script&gt;

&lt;style lang="scss" scoped&gt;
  span{
    color:green
  }
&lt;/style&gt;import Vue from 'vue'
import App from './App.vue'
import './assets/styles/index.scss'

new Vue({
  render:h =&gt; h(App)
}).$mount('#app')&lt;img src="@/assets/images/logo.png"&gt;npm i vue-router –save

<h3>在main.js的Vue实例中注入Router</h3>



import Vue from 'vue'
 import App from './App'
 //引入router组件
 import router from './router/router'
 import './assets/styles/reset.css'


new Vue({
 //注入router
 router,
 render:h => h(App)
 }).$mount('#app')



<h3>构建router组件</h3>
<p>按照路径建立router文件：src/router/router.js</p>
<p>router.js</p>



import Vue from 'vue'
 import VueRouter from 'vue-router'


import Page1 from '@/components/page1'
 import Page2 from '@/components/page2'


Vue.use(VueRouter)
 export default new VueRouter({
 mode: 'history',
 base: process.env.BASE_URL,
 routes: [{
 path: '/',
 name:'home',
 component: Page1
 },{
 path: '/page2',
 name:'page2',
 component: Page2
 }]
 })



<p><em>常见的渲染失败的缘由：</em></p>
<ul>
<li><em>router实例的路由配置项 routes，不要误写成 routers</em></li>
<li><em>routes配置项中必需要有路径为’/’，不然渲染失败</em></li>
</ul>
<h3>使用router</h3>
<p>在App.vue中能够直接使用<code>&lt;router-view&gt;</code>和<code>&lt;router-link&gt;</code>标签</p>
<h2>10. 注入Vuex</h2>
<blockquote>vuex: <a href="https://vuex.vuejs.org/zh/guide/" rel="nofollow noreferrer">https://vuex.vuejs.org/zh/guide/</a>
</blockquote>
<h3>安装vuex</h3>
<pre><code class="coffeescript">npm i vuex –save


在main.js的Vue实例中注入store



import Vue from 'vue'
import App from './App'
import router from './router/router'
import store from './store/store'
import './assets/styles/reset.css'

new Vue({
  router,
  store,
  render:h =&gt; h(App)
}).$mount('#app')


构建store目录


src/store/store.js
可按须要将state、actions、mutations拆分出来


store.js



import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cur:'OFF',
  },
  actions: {
    changeCur (ctx,cur) {
      ctx.commit('changeCueMutations',cur)
    }
  },
  mutations: {
    changeCueMutations (state,cur) {
      cur == 'OFF' ? state.cur = 'ON' :state.cur = 'OFF'
    }
  }
})


11. 打包发布


webpack.config.js中若是配置项：mode:'development', build的结果是未通过压缩的很是的大
修改 package.json 中的scripts，将打包时的mode切换成production



  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
    "dev": "webpack-dev-server --hot --open",
    "build": "webpack --mode production --progress --hide-modules"
  },


文档汇总


webpack相关


            
            
            

 

  
  webpack官方文档： 
 
  https://webpack.docschina.org/ 
 
  
webpack安装： 
 
  https://webpack.docschina.org... 
 
  
webpack-dev-server： 
 
  https://webpack.docschina.org... 
 
  
webpack配置： 
 
  https://webpack.docschina.org... 
 
  
webpack命令行接口： 
 
  https://webpack.docschina.org... 
 
  
webpack解析（resolve）： 
 
  https://webpack.docschina.org... 
 
  
webpack - loader： 
 
  https://webpack.docschina.org... 
 
  
webpack - module： 
 
  https://webpack.docschina.org... 

 


Vue相关


            
            
            

 

  
  Vue官方文档（中文）： 
 
  https://cn.vuejs.org/ 
 
  
Vue-cli: 
 
  https://cli.vuejs.org/zh/guide/ 
 
  
Vue-router: 
 
  https://router.vuejs.org/ 
 
  
Vuex: 
 
  https://vuex.vuejs.org/ 
 
  
Vue-loader(单文件组件): 
 
  https://vue-loader.vuejs.org/ 

 


babel相关


            
            
            

 

  
  babel官方文档： 
 
  https://babel.docschina.org/ 
 
  
babel使用指南： 
 
  https://babel.docschina.org/d... 
 
  
babel的配置： 
 
  https://babel.docschina.org/s... 
 
  
babel-env： 
 
  https://babel.docschina.org/d... 

 


其余


            
            
            

 

  
  npm官方： 
 
  https://www.npmjs.com/ 
 
  
npm CLI（命令行指令）： 
 
  https://docs.npmjs.com/ 
 
  
vue-style-loader: 
 
  https://www.npmjs.com/package... 
 
  
node-sass: 
 
  https://www.npmjs.com/search?... 

 
<h3>在main.js的Vue实例中注入Router</h3><h3>构建router组件</h3>
<p>按照路径建立router文件：src/router/router.js</p>
<p>router.js</p><p><em>常见的渲染失败的缘由：</em></p>
<ul>
<li><em>router实例的路由配置项 routes，不要误写成 routers</em></li>
<li><em>routes配置项中必需要有路径为’/’，不然渲染失败</em></li>
</ul>
<h3>使用router</h3>
<p>在App.vue中能够直接使用<code>&lt;router-view&gt;</code>和<code>&lt;router-link&gt;</code>标签</p>
<h2>10. 注入Vuex</h2>
<blockquote>vuex: <a href="https://vuex.vuejs.org/zh/guide/" rel="nofollow noreferrer">https://vuex.vuejs.org/zh/guide/</a>
</blockquote>
<h3>安装vuex</h3>
<pre><code class="coffeescript">npm i vuex –saveimport Vue from 'vue'
import App from './App'
import router from './router/router'
import store from './store/store'
import './assets/styles/reset.css'

new Vue({
  router,
  store,
  render:h =&gt; h(App)
}).$mount('#app')import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cur:'OFF',
  },
  actions: {
    changeCur (ctx,cur) {
      ctx.commit('changeCueMutations',cur)
    }
  },
  mutations: {
    changeCueMutations (state,cur) {
      cur == 'OFF' ? state.cur = 'ON' :state.cur = 'OFF'
    }
  }
})"scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
    "dev": "webpack-dev-server --hot --open",
    "build": "webpack --mode production --progress --hide-modules"
  },
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程