Vue开发环境搭建

Nodejs与包管理工具安装：

Windows安装：

下载安装包安装就可以。

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'}
        ]
    }

posted on 2018-07-11 12:56 走遍江湖阅读(2058) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

云中客

公告

Nodejs与包管理工具安装：

快捷通道（Vue-cli方法）：

手动设置：