webpack+vue.js构建项目

webpack+vue.js构建项目

新的改变

作为vue.js初学者，结合webpack自己从零开始搭建一个项目。
一、webpack安装.
当然，在这之前，你得先安装好node.js。
1、npm安装webpack。

   npm install -g webpack //全局安装
   npm install -g webpack-dev-server //安装调试工具

2、创建项目
结合vue-cli的启发，创建项目如下

• cmd创建项目
  • mkdir vueframe //创建项目文件夹
  • cd vueframe //进入该文件目录下

然后npm init，一直回车即可
之后在目标文件中可以看到 package.json文件。

二、安装项目依赖
这里我们可以手动在package.json文件中添加相应的依赖，然后命令运行npm install。也可以使用命令npm install fileName --save-dev，来进行相关的依赖文件安装，我这里用npm 安装项目依赖

    npm i vue vue-router -D
    npm i style-loader css-loader -D//由于我引入了css，所以需要安装此项目依赖

安装成功后我们可以在目录下检查

package.json文件我的代码如下

{
	  "name": "vueframe",
	  "version": "1.0.0",
	  "description": "",
	  "main": "index.js",
	  "scripts": {
	    "test": "echo \"Error: no test specified\" && exit 1"
	  },
	  "author": "",
	  "license": "ISC",
	  "devDependencies": {
	    "css-loader": "^2.1.0",
	    "style-loader": "^0.23.1",
	    "vue": "^2.6.8",
	    "vue-router": "^3.0.2"
	  }
}

三、配置webpack.config.js，手动创建配置。

const path = require('path');
module.exports={
    mode:"development",
    entry:{
        app:'./src/app.js'
    },
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:"[name].min.js"
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    }
}

四、按照下图，构建项目

1、创建一个index.html,代码如下

         <div id="app">
               <router-view name='header'></router-view>
               <router-view></router-view>
               <router-view name='footer'></router-view>
         </div>
        <script src="dist/app.min.js"></script>

2、在vueframe目录下，新建一个src文件夹，新建app.js,以及router.js(主要放路由),新建components文件夹存放组件

• app.js代码如下

  import Vue from 'vue/dist/vue.esm';//要注意使用webpack引入vue.esm.js,而不是vue.js
  import VueRouter from 'vue-router';
  import router from './router';
  import '../css/main.css'
  Vue.use(VueRouter)
  	new Vue({
  	    el:"#app",
  	    router,
  	    data:{
  	
  	    }
  	})
  

• router.js代码如下

import VueRouter from 'vue-router';
import header from './components/header';
import new1 from './components/news1';
import new2 from './components/new2';
import footer from './components/footer';
export default new VueRouter({
    routes:[
        {
            path:'/index',
            name:'index',
            components:{
                header:header,
                default:new1,
                footer:footer
            }
        },{
            path:'/news',
            name:'news',
            components:{
                header:header,
                default:new2,
                footer:footer
            }
        }
    ]
})

• footer.js代码如下

export default {
    template: `
  <div class="footer">
    this is footer
  </div>
  `
  }

header.js,new1.js,new2.js代码跟footer.js形式差不多，就不贴出来来了
五、最终实现

• webpack
  
  
  刚开始写博文，有什么不对或者用词不当的地方，欢迎留言指正。