zoukankan      html  css  js  c++  java
  • Vue开发环境搭建

    Nodejs与包管理工具安装:

    Windows安装:

    https://nodejs.org/en/

    下载安装包安装就可以。

    Ubuntu安装:

    //安装nodejs
    sudo apt-get install nodejs
    //安装包管理工具
    sudo apt-get install npm

    安装结果确认:

    ~/dev/devtest$ node --version
    v8.11.1
    ~/dev/devtest$ npm --version
    5.8.0

    快捷通道(Vue-cli方法):

        //设置npm仓库镜像为国内淘宝镜像
        npm config set registry https://registry.npm.taobao.org
        //查看配置是否成功
        npm config get registryf
        //全局安装 webpack
        npm install -g webpack
        //全局安装 vue-cli
        npm install -g vue-cli
        //创建一个基于webpack模板的项目
        vue init webpack my-project
        
        cd my-project
        npm install
        //这一步看着简单,实际上都在配置文件里面配好了,可以去研究一下
        npm run dev

    自动生成的目录结构:

    手动设置:

    1,初始化与安装WebPack

    // 进入文件夹,初始化设置
    npm init -y
    
    // Webpack和服务器安装
    npm i webpack webpack-cli webpack-dev-server --save-dev

    2,添加简单代码测试

    webpack.config.js:

    const path = require('path');
    module.exports = {
     entry: './src/index.js',
     output: {
     filename: 'bundle.js',
     path: path.join(__dirname, 'dist')
     },
     devServer: {
     contentBase: path.join(__dirname, 'dist')
     },
    }

    dist/index.html:

    <!DOCTYPE html>
    <html>
    <head>
     <meta charset="utf-8">
     <title></title>
    </head>
    <body>
     Hello World
    </body>
    </html>

    src/index.js 空文件

    启动确认:

     npx webpack-dev-server 

     

    3, 引入Vue

    // VUE安装
    npm i vue --save
    
    // VUE单独文件处理的Loader安装
    npm i vue-loader vue-template-complier vue-style-loader css-loader --save-dev

    Vue单文件组件与Loader设置

    //webpack.config.js
    
    const path = require('path');
    const VueLoaderPlugin = require('vue-loader/lib/plugin');
    
    module.exports = {
        mode: 'development',
        entry: './src/index.js',
        output: {
            filename: 'bundle.js',
            path: path.join(__dirname, 'dist')
        },
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js'
            }
        },
        module: {
            rules: [{
                    test: /.css$/,
                    use: [
                        'vue-style-loader',
                        'css-loader'
                    ]
                },
                {
                    test: /.vue$/,
                    loader: 'vue-loader',
                    options: {
                        loaders: {
                            'scss': [
                                'vue-style-loader',
                                'css-loader',
                                'sass-loader'
                            ],
                            'sass': [
                                'vue-style-loader',
                                'css-loader',
                                'sass-loader?indentedSyntax'
                            ]
                        }
                    }
                }
            ]
        },
        devServer: {
            contentBase: path.join(__dirname, 'dist')
        },
        plugins: [
            new VueLoaderPlugin()
        ],
        devtool: '#eval-source-map'
    }

    4,Vue单文件组件测试

    <!-- dist/index.html-->
    <!DOCTYPE html>
    <html>
    <head>
     <meta charset="utf-8">
     <script src="./bundle.js"></script>
     <title></title>
    </head>
    <body>
     <div id="app"></div>
    </body>
    </html>
    // src/index.js
    
    import Vue from 'vue';
    import App from './components/App.vue';
    
    window.onload = function() {
        new Vue({
            el: '#app',
            template: '<app></app>',
            components: { App }
        })
    }
    //src/components/App.vue
    
    <template>
        <div>
            <header-component></header-component>
            <p class="blue">This is App component.</p>
        </div>
    </template>
    
    <script>
    import Header from './Header.vue';
    
    export default {
        components:{
            'header-component':Header
        }
    }
    </script>
    
    <style>
    .blue{
        color: blue;
    }
    </style>
    //src/components/Header.vue
    
    <template>
        <div>
            <p class="title">{{title}}</p>
        </div>
    </template>
    
    <script>
    export default {
        data:function(){
            return{
                title:'This is Header component'
            }
        }
    }
    </script>
    
    <style>
    .title{
        font-size: 20px;
        font-weight: bold;
    }
    </style>

    启动服务查看结果:

     

    webpack.config.js说明:

    //修改webpack.config.js
    var path = require('path');
    var webpack = require('webpack');
    
    module.exports = {
        entry: './src/main.js', // 项目的入口文件,webpack会从main.js开始,把所有依赖的js都加载打包
        output: {
            path: path.resolve(__dirname, './dist'), // 项目的打包文件路径
            publicPath: '/dist/', // 通过devServer访问路径
            filename: 'build.js' // 打包后的文件名
        },
        devServer: {
            historyApiFallback: true,
            overlay: true
        }
    };
    
    //修改package.josn
    //webpack-dev-server会自动启动一个静态资源web服务器 --hot参数表示启动热更新
    "scripts": {
        "dev": "webpack-dev-server --open --hot",
        "build": "webpack --progress --hide-modules"
      },
    
    //运行
    //浏览器自动打开的一个页面,随意修改js,浏览器会自动刷新
    npm run dev
    
    //编译
    npm run build

    Load配置说明:

    //webpack默认不支持转码es6,但是import export这两个语法却单独支持
    //webpack默认只支持js的模块化,如果需要把其他文件也当成模块引入,就需要相对应的loader解析器//webpack.config.js
    var path = require('path');
    var webpack = require('webpack');
    
    module.exports = {
        entry: './src/main.js',
        output: {
            path: path.resolve(__dirname, './dist'),
            publicPath: '/dist/',
            filename: 'build.js'
        },
        devServer: {
            historyApiFallback: true,
            overlay: true
        },
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js'
            }
        },
        module: {
            rules: [
                {
                    test: /.css$/,
                    use: [
                        'vue-style-loader',
                        'css-loader'
                    ],
                }
            ]
        }
    };
    
    //匹配后缀名为css的文件,然后分别用css-loader,vue-style-loader去解析 解析器的执行顺序是从下往上(先css-loader再vue-style-loader)
    //我们这里用vue开发,所以使用vue-style-loader,其他情况使用style-loader

    打包发布:

    // 对文件进行压缩,缓存,分离等等优化处理//修改package.json
    "scripts": {
        "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
        "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
    }
    
    //修改webpack.config.js,判断NODE_ENV为production时,压缩js代码
    var path = require('path');
    var webpack = require('webpack');
    
    module.exports = {
        // 省略...
    }
    
    if (process.env.NODE_ENV === 'production') {
        module.exports.devtool = '#source-map';
        module.exports.plugins = (module.exports.plugins || []).concat([
          new webpack.DefinePlugin({
            'process.env': {
              NODE_ENV: '"production"'
            }
          }),
          new webpack.optimize.UglifyJsPlugin(),
        ])
      }
      
    module: {
            //加载器配置
            loaders: [
                //.css 文件使用 style-loader 和 css-loader 来处理
                { test: /.css$/, loader: 'style-loader!css-loader' },
                //.js 文件使用 jsx-loader 来编译处理
                { test: /.js$/, loader: 'jsx-loader?harmony' },
                //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
                { test: /.scss$/, loader: 'style!css!sass?sourceMap'},
                //图片文件使用 url-loader 来处理,小于8kb的直接转为base64
                { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
            ]
        }
  • 相关阅读:
    jMeter 里 CSV Data Set Config Sharing Mode 的含义详解
    如何使用 jMeter Parallel Controller
    使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况
    使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题
    关于 SAP 电商云首页加载时触发的 OCC API 请求
    SAP UI5 确保控件 id 全局唯一的实现方法
    SAP 电商云 Accelerator 和 Spartacus UI 的工作机制差异
    介绍一个好用的能让网页变成黑色背景的护眼 Chrome 扩展应用
    Chrome 开发者工具 performance 标签页的用法
    Client Side Cache 和 Server Side Cache 的区别
  • 原文地址:https://www.cnblogs.com/lixiaobin/p/vuedevenv.html
Copyright © 2011-2022 走看看