step-01 搭建一个简易的vue

开始之前我们先来复习下vue,先搭建一个简单的vue项目。
目录下运行 npm init 初始化项目。
根目录新建一个webpack.config.js文件，并将移除package.json的main入口，在webpack.config.js里定义入口文件，并添加"private": true。
安装webpack(webpack安装的4.X版本,因为这时很多包在webpack5下会出问题,webpack-cli安装的是3.X的版本)以及其他需要的包。

{
    "name": "step-01",
    "version": "1.0.0",
    "private": true,
    "description": "",
    "scripts": {
        "dev": "webpack-dev-server",
        "build": "webpack",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
        "css-loader": "^5.0.1",
        "html-webpack-plugin": "^4.5.1",
        "less": "^4.0.0",
        "less-loader": "^7.2.1",
        "path": "^0.12.7",
        "postcss": "^8.2.2",
        "postcss-loader": "^4.1.0",
        "style-loader": "^2.0.0",
        "vue": "^2.6.12",
        "vue-loader": "^15.9.6",
        "vue-router": "^3.4.9",
        "vue-template-compiler": "^2.6.12",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.1"
    },
    "dependencies": {
        "webpack": "^4.46.0"
    }
}

根目录下新建src目录，并在src下添加入口文件main.js、app.vue

// main.js
import Vue from 'vue'
import app from './App.vue'

new Vue({
    el: '#app',
    render: h => h(app)
})

配置webpack.config.js。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    mode: 'development',

    entry: './src/main.js',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.js$/,
                use: 'babel-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({  //将根目录的index打包到dist下
            template: path.resolve(__dirname, 'index.html'),  
            filename: 'index.html'
        }),
        new VueLoaderPlugin()  //解析.vue文件的插件
    ]
}

现在执行 npm run build 命令，就会发现dist文件夹下已经打包好了index.html和main.bundle.js文件，如果使用IIS等打开index.html你会发现页面已经正常运行了。

现在我们使用webpack来建立开发环境
安装 webpack-dev-server,在webpack.config.js加上

devServer: {
    contentBase: './dist',
    port: 3019
},

package.json的script属性里加上"dev": “webpack-dev-server” 这时候运行 npm run dev 服务就跑起来了。
加上路由,在src下建2个vue组件和router.js文件

import Vue from 'vue'
import Router from 'vue-router'
import foo from './components/Foo.vue'
import bar from './components/Bar.vue'

Vue.use(Router)

const routes = [
    { path: '/foo', component: foo, name: 'foo' },
    { path: '/bar', component: bar, name: 'bar' }
]
const router = new Router({
    routes
})

export default router

将路由加到入口main.js

//其他代码
new Vue({
    el: '#app',
    router,
    render: h => h(app)
})

加上样式
安装相应的包，在webpack.config.js加上loader

// 其他配置
module: {
    rules: [
        {
            test: /\.vue$/,
            use: 'vue-loader'
        },
        {
            test: /\.js$/,
            use: 'babel-loader'
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],  //注意顺序
        },
        {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']  //解析less
        }
    ]
},
// 其他配置

注意顺序，loader是从右到左解析，css-loader是将样式解析成数组(或对象)，style-loader再将数组(或对象)解析成我们常见的css并注入到页面。

源码地址

下一篇：step-02初识vue-ssr