Vue+webpack实战 TodoList(附项目源码)

最新推荐文章于 2025-09-07 00:33:59 发布

原创

最新推荐文章于 2025-09-07 00:33:59 发布 · 822 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Vue实战 #webpack #less #webpack实战 #Vue.js

本文通过Vue CLI创建了一个TodoList项目，介绍了全局安装vue-cli、项目初始化、数据和样式绑定，以及如何使用less。在webpack配置中进行了相应的调整，并提供了源码下载链接。

全局安装vue-cli

 npm i vue-cli -g

创建项目

vue init webpack-simple vue-todos

进入项目文件夹，项目初始化

cd vue-todos
npm i

运行项目，将会看到默认界面

npm run dev

这里将app.vue中其余内容删除，只保留基本框架

<template>
  <!--视图模板-->
  <!--注意！从vue2.0开始组件模板必须有且只有一个顶层元素-->
  <div id="app">
    
  </div>
</template>
<!--组件定义-->
<script>
export default {
  name: 'app'
}
</script>
<!--组件样式表-->
<style>
</style>

这里样式使用less，需进行相关配置

 npm i less style-loader css-loader less-loader -D

在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'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: