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`这个服务器上面去了，我们在项目里面是看不到生成的实实在在的这些文件的

3.配置路由

1.一般编写移动端的页面时会用到基于vue的mint-ui的一个组件库
安装:cnpm i mint-ui --save/-S
在main.js中集成到项目中
    import MintUI from 'mint-ui';
    import 'mint-ui/lib/style.css';
    Vue.use(MintUI);
2.配置路由
    2.1安装vue-router:npm i vue-router -S
    2.2集成到项目中:
        import vueRouter from 'vue-router'
        Vue.use(vueRouter);//这时候vue对象的原型里就有了$router,$route两个方法
    2.3将需要使用路由加载的vue组件文件引入
        import home from './components/home/home.vue'
    2.4创建路由的实例对象,并将组件与路由路径进行绑定
        const router = new vueRouter({
          routes:[
            {path:'/',redirect:'/home'},//路由重定向,将默认跟组件重新定向指向首页模块
            {path'/home',component:home}//将home组件与/home这个路由路径绑定
          ]
        })
     2.5将路由的实例对象router注入到vue的根实例中new Vue({router})
3.将文件根据路由路径绑定的组件加载到相应的位置
     class="routerViewStyle">router-view>//路由出口,所有路由加载的组件都从这里显示到页面
4.实现页面的跳转,即加载不同的组件
    <router-link to="/news/newslist">
        <span class="mui-icon mui-icon-home">span>
        <div class="mui-media-body">新闻咨询div>
     router-link>
//将需要点击跳转的部分用router-link标签包裹,to属性内写的是要跳转的路由地址(声明式导航)

4.获取数据信息

1.用vue-resource发送网络请求获取数据
    1.1安装:npm i vue-resource -S
    1.2集成到项目中
        import vueResource from 'vue-resource'
        Vue.use(vueResource);//vue原型对象中会多出$http的对象(vue-resource对象)
    1.3使用方法 
        this.$http.get(url).then(res=>{console.log(res)})
        this.$http.post(url,{要传递的数据(对象)}).then(res=>{console.log(res)})
    //注意:因为vue-resource已经不再更新,所以推荐用axios发送网络请求
2.用axios发送网络请求
    1.1安装:npm i axios -S
    1.2集成到项目中
        import axios from 'axios'
        Vue.prototype.$axios = axios;//vue原型对象中会多出$axios的对象,及他的方法
    1.3使用方法 
        this.$axios.get(url).then(res=>{console.log(res)})
        this.$axios.post(url,{要传递的数据(对象)}).then(res=>{console.log(res)})//json类型
        this.$axios.post(url,'content=' + content).then(res=>{console.log(res)})//键值对类型

父子组件通讯

将父组件的值传递到子组件:

在父组件中要加载子组件的模板标签内部设置一个自定义属性,属性名=’属性值’

然后再子组件中用props进行声明props:['属性名'],这样就可以在子组件中得到这个值了

将子组件的值传递到父组件:

通过v-on监听自定义事件的方式,将子组件的值传递到父组件

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件

首先在父组件挂载子组件的标签内部用v-on:'自定义事件名称'='事件执行函数'的方式绑定一个自定义事件,然后在methods里边定义事件执行函数,父组件部分完成

子组件部分通过this.$emit('自定义事件名称',需要传递的值)

非父子组件通讯

当数据量小,需要传值的结构较简单的时候可以用一个公共的vue对象,一般叫bus来传递,

首先是创建一个公共的js文件,内部创建一个名为bus的vue对象,将此对象导出,然后再需要传值的两个文件分别引入这个对象,

接收方:通过bus.$on('自定义事件',事件处理函数) 的方式接收数据

发送方:通过bus.$emit('自定义事件名称',需要传递的值) 的方式发送数据

当数据量大,需要多个组件进行通讯的时候要用到Vuex

webpack开发环境的配置

const HtmlWebpackPlugin = require('html-webpack-plugin');//这个插件的作用是根据模板自动生成index文件
//导出配置对象
export default {
    entry:'入口文件路径',
    //开发环境不需要配置出口文件
    module:{
        //配置规则
        rules:[
          {
            test:/\.vue$/,//需要匹配的文件规则
                use:[
                    {loader:"vue-loader"}//依赖于什么loader
                ]
          },
          {
                test:/\.css$/,//需要打包支持的文件
                use:[
                    {loader:"style-loader"},
                    {loader:"css-loader"}
                ]
            },
            {
                test:/\.(ttf|png|svg|gif|jpg)$/,//需要打包支持的文件
                use:[
                    {loader:"url-loader"}
                ]
            }
        ]
    },
     plugins:[//需要用到的插件
        new HtmlWebpackPlugin({
            template:'template.html',//根据哪个模板
            filename:'index.html'//要生成的文件
        })
    ]
}

webpack打包工具的使用

1.创建一个生产阶段的webpack配置文件

2.在开发阶段的配置文件的基础上添加针对性的代码

3.可以在package.json文件中的scripts下配置快捷指令"build":"webpack --progress --config webpack.config.prod.js"在终端中通过npm run build执行这个命令

4.//打包之前，删除dist目录,安装npm i clean-webpack-plugin --save--dev代码如下:

var CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
        //打包之前，删除dist目录，写在其它插件前面
        new CleanWebpackPlugin('dist')
]

5.添加es6—>es5的配置信息: 安装包:npm i babel-loader babel-core babel-preset-env --save--dev在当前根目录下创建一个babel配置文件.babelrc,写预设代码{"presets": ["env"]} ,然后在webpack.config.prod.js中对js进行转换

6.对bundle.js和index.js进行压缩:参考文档:https://cn.vuejs.org/v2/guide/deployment.html

在webpack.config.prod.js中配置插件信息:

压缩bundle.js:

var webpack = require('webpack');
 plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'//将环境设置为生产环境
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            // 对bundle.js进行压缩配置
            compress: {
                warnings: false//去掉警告信息
            },
            comments:false//去掉版权等注释
        })
    ]

压缩index.html:

plugins: [
        new HtmlWebpackPlugin({
            template: 'template.html', //模板
            filename: 'index.html' ,//生成的文件
             minify:{
                collapseWhitespace:true,//压缩空格
                removeComments:true,//去除注释
                minifyJS:true,//压缩js
                minifyCSS:true//压缩css
            }
        })
    ]

7.对bundle.js进行优化

第三方包,图片,第三方样式都会造成bundle.js过大

抽离图片,在原先url-loader的基础上添加参数,代码如下:

{
     test:/\.(ttf|png|gif|svg)$/,
     use: [
        { 
     /*
        limit：
        表示的是一个阀值,如果当前我们资源中的图片大小
       4kb就从bundle.js中剥离出来，如果小于4kb打包进bundle.js,4kb只是我这设置的一个值,实际开发过程中要根据业务来
        name:抽离出来的图片，放在哪个文件夹下，用什么文件名称命名
        [name]代表你原始的文件名称
        [hash:5] 避免图片换了之后，浏览器还加在原先的图片,解决缓存的问题
        [ext] 图片本身的拓展名
        */
        loader: "url-loader?limit=4000&name=images/[name]-[hash:5].[ext]" 
         }
      ]
}

抽离第三方包代码,

entry: {//入口
         //属性名称，是最终生成好的js文件名称，值是我们安装时候的第三方包的名称
         mintUi:['mint-ui'],
         moment:['moment'],
         quanjiatong:['vue','vue-router','vuex'],
         vueResource:['vue-resource'],
         vuePreview:['vue-preview'],
         axios:['axios'],
         bundle:'./src/main.js' //别忘记自己写的源代码
    },
output: { //出口
        path: path.join(__dirname, 'dist'),
        filename: 'js/[name].js'
    },
plugins: [
         //抽离第三方包的，这里不要写bundle.js
         new webpack.optimize.CommonsChunkPlugin({
            name: ['mintUi','moment','quanjiatong','vueResource','vuePreview','axios'],
            // filename: "vendor.js"
            // (给 chunk 一个不同的名字)       
            minChunks: Infinity,
            // (随着 entry chunk 越来越多，
            // 这个配置保证没其它的模块会打包进 vendor chunk)
        }),
    ]

抽离第三方样式,安装插件npm install --save-dev extract-text-webpack-plugin代码如下:

const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

8.vue路由懒加载优化

参考文档:https://router.vuejs.org/zh-cn/advanced/lazy-loading.html

如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件npm install --save-dev babel-plugin-syntax-dynamic-import，才能使 Babel 可以正确地解析语法。

第一步:把原先引入路由组件的方式改成const Foo = () => import('./Foo.vue')这种样式

第二步: 在.babelrc的配置文件里配置代码

{
  "plugins": ["syntax-dynamic-import"]
}