vue+webpack项目搭建

vue+webpack项目搭建

1.首先搭建项目基本结构

src文件夹:项目源代码所在的文件夹
    main.js 项目打包入口的文件
    App.vue 项目启动之后用户看到的第一个组件
package.json 项目描述文件
webpack.config.dev.js ： 开发阶段的webpack的配置文件

2.编写基本配置代码

1.在app.vue中写项目启动所要呈现的内容,写在template之间
2.在main.js中引入App.vue
  使用vue框架把App.vue作为项目启动后用户看到的第一个组件
    安装vue: cnpm i vue --save
    创建根实例，在根实例中，让我们的框架第一个显示App.vue,代码如下:
    new Vue ({
      el:'#app',
      render:h=>h(App)//function(createElement){return createElement(App)}
    })
3、在webpack.config.dev.js中配置打包的指令
    entry:'main.js路径'//入口
    loader: 
        安装`vue-loader`对我们.vue结尾的文件打包        
4、使用`html-webpack-plugin`，来根据参照文件(template.html)，生成一个index.html
    4.1、先写好template中的内容，里面要写上id=app的div
    4.2、安装`html-webpack-plugin`插件，在webpack.config.dev.js中写好代码
        参考:https://github.com/jantimon/html-webpack-plugin      
5、使用 webpack-dev-server 打包
    在我们项目的根目录下，运行下面的代码:
        webpack-dev-server --progress --config webpack.config.dev.js --open --port 6008 --hot

    解释:
        --progress 查看打包进度
        --config xxx.js 指定打包的配置文件
        --open 打开默认浏览器
        --port 6008 指定打开的端口，如果不指定，默认是8080
        --hot 启动热重载，告诉vue-loader可以进行热重载了
注意：
    开发阶段，我们生成的index.html及bundle.js都发布到`webpack-dev-server`这个服务器上面去了，我们在项目里面是看不到生成的实