vue学习笔记

vue+webpack

通过vue+webpack打造一个TODO应用

项目框架主要搭建流程

1.初始化项目

npm init

生成package.json文件

2.安装基本包

npm i webpack vue vue-loader

生成node-modules文件夹和packages-lock.json文件

3.创建src文件夹在根目录下

src

app.vue（顶层vue组件）

main.js(入口文件)

4.创建webpack.config.js文件

用于打包前端资源的配置文件

5.在package.json文件的scripts对象中加入"build"配置

"build":"webpack --config webpack.config.js"

表示调用项目中的webpack,而非全局的webpack。

6.生成打包文件

npm run build

7.安装相关包或插件用于生成可运行的html

npm i cross-env html-webpack-plugin webpack-dev-server

8.在pack.json中更改"build"配置并添加"dev"配置

"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

9.在webpack.config.js中添加相关插件并设置项目访问地址

const HTMLPlugin=require('html-webpack-plugin')   //生成html页面的插件
if(isDev){
// 方便代码调试
config.devtool='#cheap-module-eval-source-map'
//服务访问地址
config.devServer={
    port:8091,
    // host:'localhost',
    overlay:{
        errors:true, //定位错误
    },
    // open:true  //自动在浏览器中打开
    hot: true  //实现热加载，代码更改后实现页面的局部更新
}
config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()      
)
}

10.运行项目

npm run dev

针对不同的项目之后还要创建不同的vue组件，按需安装各种包或插件

---

本项目结合vue+webpack构建一个todo应用，实现计划定制、和任务的删除和查看等功能。该用例大致分为5部分，分别为：header、footer、todo、item和tabs，即意味着有5个组件。
创建本项目需要安装的一些插件有：

postcss-loader,autoprefixer,babel-loader,babel-core,babel-preset-env,babel-plugin-transform-vue-jsx

界面运行效果如下：

主界面：

全部计划：

已完成计划：

未完成计划：