├── .babelrc ├── .github └── workflows │ └── nodejs.yml ├── .gitignore ├── README.md ├── SUMMARY.md ├── XIAOJI.md ├── package-lock.json ├── package.json ├── postcss.config.js ├── src ├── app.vue ├── assets │ ├── images │ │ ├── beijing.jpg │ │ ├── bg.png │ │ ├── checked.svg │ │ └── unChecked.svg │ └── styles │ │ ├── footer.styl │ │ ├── global.styl │ │ ├── test-stylus.styl │ │ └── test.css ├── index.js └── todo │ ├── footer.jsx │ ├── header.vue │ ├── item.vue │ ├── tabs.vue │ └── todo.vue ├── untitled.md └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ], 5 | "plugins": [ 6 | "transform-vue-jsx" 7 | ] 8 | } 9 | 10 | //转换vue中的jsx代码 11 | //npm i babel-preset-env@1.6.1 babel-plugin-transform-vue-jsx@3.5.0 12 | //npm i babel-helper-vue-jsx-merge-props@^2.0.0 babel-plugin-syntax-jsx@^6.8.0 -------------------------------------------------------------------------------- /.github/workflows/nodejs.yml: -------------------------------------------------------------------------------- 1 | name: Node CI 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | 8 | runs-on: ubuntu-latest 9 | 10 | strategy: 11 | matrix: 12 | node-version: [8.x, 10.x, 12.x] 13 | 14 | steps: 15 | - uses: actions/checkout@v1 16 | - name: Use Node.js ${{ matrix.node-version }} 17 | uses: actions/setup-node@v1 18 | with: 19 | node-version: ${{ matrix.node-version }} 20 | - name: npm install, build, and test 21 | run: | 22 | npm ci 23 | npm run build --if-present 24 | npm test 25 | env: 26 | CI: true 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln 14 | package-lock.json 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 一起读书 2 | 3 | -------------------------------------------------------------------------------- /SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Table of contents 2 | 3 | * [一起读书](README.md) 4 | * [Untitled](untitled.md) 5 | * [百度](https://baidu.com) 6 | 7 | -------------------------------------------------------------------------------- /XIAOJI.md: -------------------------------------------------------------------------------- 1 | # CSS小记 2 | 3 | ## 1.opacity [CSS3属性] 4 | opacity 属性设置元素的不透明级别。 5 | 语法: opacity: value|inherit. 6 | 值|描述 7 | :--:|:--: 8 | value|规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 9 | inherit|应该从父元素继承 opacity 属性的值。 10 | 11 | ## 2.appearance [CSS3属性] 12 | appearance 属性允许您使元素看上去像标准的用户界面元素。 13 | 语法: appearance: normal|icon|window|button|menu|field; 14 | 值|描述 15 | :--:|:--: 16 | normal|将元素呈现为常规元素。 17 | icon|将元素呈现为图标（小图片）。 18 | window|将元素呈现为视口。 19 | button|将元素呈现为按钮。 20 | menu|将元素呈现为一套供用户选择的选项。 21 | field|将元素呈现为输入字段。 22 | 23 | 浏览器支持 24 | 所有主流浏览器都不支持 appearance 属性。 25 | Firefox 支持替代的 -moz-appearance 属性。 26 | Safari 和 Chrome 支持替代的 -webkit-appearance 属性。 27 | 28 | ## 3.disply: flex布局 justify-content 29 | [参考链接](http://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=space-between) 30 | 31 | ## 4.font-smoothing 用于设置字体的抗锯齿或光滑度的属性。 32 | 它有三个属性值: 33 | none ------ 对低像素的文本比较好 34 | subpixel-antialiased------默认值 35 | antialiased ------抗锯齿很好 36 | 37 | # javaScript小记 38 | ## unshift()方法 39 | unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。 40 | 语法: arrayObject.unshift(newelement1,newelement2,....,newelementX) 41 | 参数|描述 42 | :--:|:--: 43 | newelement1|必需。向数组添加的第一个元素。 44 | newelement2|可选。向数组添加的第二个元素。 45 | newelementX|可选。可添加若干个元素。 46 | 47 | 说明:unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。 48 | 请注意，unshift() 方法不创建新的创建，而是直接修改原有的数组。 49 | 注释：该方法会改变数组的长度。 50 | 注释：unshift() 方法无法在 Internet Explorer 中正确地工作！ 51 | 提示：要把一个或多个元素添加到数组的尾部，请使用 push() 方法。 52 | 53 | # vue小记 54 | ## 1.vue中$emit的用法 55 | 父组件可以使用 props 把数据传给子组件。 56 | 子组件可以使用 $emit 触发父组件的自定义事件。 57 | 58 | 59 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-webpack-todo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "cross-env NODE_ENV=production webpack --config webpack.config.js", 9 | "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js" 10 | }, 11 | "author": "Jasonccj", 12 | "license": "ISC", 13 | "dependencies": { 14 | "autoprefixer": "^7.2.3", 15 | "babel-core": "^6.26.0", 16 | "babel-helper-vue-jsx-merge-props": "^2.0.0", 17 | "babel-loader": "^7.1.2", 18 | "babel-plugin-syntax-jsx": "^6.8.0", 19 | "babel-plugin-transform-vue-jsx": "^3.5.0", 20 | "babel-preset-env": "^1.6.1", 21 | "cross-env": "^5.1.3", 22 | "css-loader": "^0.28.7", 23 | "extract-text-webpack-plugin": "^3.0.2", 24 | "file-loader": "^1.1.6", 25 | "html-webpack-plugin": "^2.30.1", 26 | "i": "^0.3.6", 27 | "post": "0.0.1", 28 | "postcss-loader": "^2.0.9", 29 | "style-loader": "^0.19.1", 30 | "stylus": "^0.54.5", 31 | "stylus-loader": "^3.0.1", 32 | "url-loader": "^0.6.2", 33 | "vue": "^2.5.13", 34 | "vue-loader": "^13.6.0", 35 | "vue-template-compiler": "^2.5.13", 36 | "webpack": "^3.10.0", 37 | "webpack-dev-server": "^2.9.1" 38 | }, 39 | "devDependencies": {} 40 | } 41 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const autoprefixer = require('autoprefixer') 2 | 3 | module.exports = { 4 | plugins: [ 5 | autoprefixer() //优化的过程通过一系列的组件进行优化,此次采用的是autoprefixer 6 | ] 7 | } 8 | 9 | //PostCss会对CSS代码进行优化,主要是解决不同浏览器识别码的问题,具体作用自行查阅 10 | //PostCss官网: https://www.postcss.com.cn/ 11 | //-ms代表【ie】内核识别码 12 | //-moz代表火狐【firefox】内核识别码 13 | //-webkit代表谷歌【chrome】/苹果【safari】内核识别码 14 | //-o代表欧朋【opera】内核识别码 -------------------------------------------------------------------------------- /src/app.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 23 | 24 | 42 | -------------------------------------------------------------------------------- /src/assets/images/beijing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccj/vue-webpack-todo/e5a0b875111594b342bd1cd6a083185b0eff416d/src/assets/images/beijing.jpg -------------------------------------------------------------------------------- /src/assets/images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccj/vue-webpack-todo/e5a0b875111594b342bd1cd6a083185b0eff416d/src/assets/images/bg.png -------------------------------------------------------------------------------- /src/assets/images/checked.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/unChecked.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/styles/footer.styl: -------------------------------------------------------------------------------- 1 | #footer 2 | margin-top 40px 3 | text-align center 4 | color #bfbfbf 5 | font-size 10px 6 | text-shadow 0 1px 0 #ffffff 7 | -------------------------------------------------------------------------------- /src/assets/styles/global.styl: -------------------------------------------------------------------------------- 1 | html, body 2 | margin 0 3 | padding 0 4 | width 100% 5 | height 100% 6 | 7 | body 8 | background-image url('../images/beijing.jpg') 9 | background-size cover 10 | background-position center 11 | font 14px 'microsoft yahei' 12 | color '#4d4d4d' 13 | font-weight 300 -------------------------------------------------------------------------------- /src/assets/styles/test-stylus.styl: -------------------------------------------------------------------------------- 1 | body 2 | font-size 20px -------------------------------------------------------------------------------- /src/assets/styles/test.css: -------------------------------------------------------------------------------- 1 | body{ 2 | color: red; 3 | background-image: url('../images/Yes-anxia.svg') 4 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' //引用vue类库 2 | import App from './app.vue' 3 | 4 | // import './assets/styles/test.css' 5 | // import './assets/styles/test-stylus.styl' 6 | // import './assets/images/bg.png' 7 | // 开发todo应用时用不到以上这些,故注释掉 8 | 9 | import './assets/styles/global.styl' 10 | 11 | const root = document.createElement('div') //创建div节点 12 | document.body.appendChild(root); //将div节点添加到body下 13 | 14 | new Vue({ 15 | render: (h) => h(App) 16 | //vue在创建Vue实例时,通过调用render方法来渲染实例的DOM树,也就是这个组件渲染的是App的内容 17 | //vue在调用render方法时,会传入一个createElement函数作为参数,也就是这里的h的实参是createElement函数,然后createElement会以App为参数进行调用 18 | }).$mount(root) //挂载html的root节点下面 -------------------------------------------------------------------------------- /src/todo/footer.jsx: -------------------------------------------------------------------------------- 1 | import '../assets/styles/footer.styl' 2 | 3 | export default { 4 | data(){ 5 | return{ 6 | author: 'Jasonccj' 7 | } 8 | }, 9 | render(){ 10 | return ( 11 | 14 | ) 15 | } 16 | } -------------------------------------------------------------------------------- /src/todo/header.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/todo/item.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 28 | 29 | 84 | -------------------------------------------------------------------------------- /src/todo/tabs.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 50 | 51 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /src/todo/todo.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 72 | 73 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /untitled.md: -------------------------------------------------------------------------------- 1 | # Untitled 2 | 3 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') //path是Nodejs中的基本包,用来处理路径 2 | const HTMLPlugin = require('html-webpack-plugin') //引入html-webpack-plugin 3 | const webpack = require("webpack") //引入webpack 4 | const ExtractPlugin = require("extract-text-webpack-plugin") 5 | 6 | const isDev = process.env.NODE_ENV === "development" //判断是否为测试环境,在启动脚本时设置的环境变量都是存在于process.env这个对象里面的 7 | 8 | const config = { 9 | target: "web", //设置webpack的编译目标是web平台 10 | entry: path.join(__dirname,'src/index.js'), //声明js文件入口,__dirname就是我们文件的根目录,用join拼接 11 | output:{ //声明出口文件 12 | filename: 'bundle.js', //将挂载的App全部打包成一个bundle.js,在浏览器中可以直接运行的代码 13 | path: path.join(__dirname,'dist') //bundle.js保存的位置 14 | }, 15 | module:{ //因为webpack只能处理js文件,且只识别ES5的语法 16 | rules:[ //所以针对不同类型的文件,我们定义不同的识别规则,最终目的都是打包成js文件 17 | { 18 | test: /\.vue$/, 19 | loader: 'vue-loader' //处理.vue文件 20 | }, 21 | { 22 | test: /\.jsx$/, 23 | loader: 'babel-loader' //处理jsx文件 24 | }, 25 | // { 26 | // test: /\.css$/, 27 | // use: [ 28 | // 'style-loader', //将css的样式写入到html里面去 29 | // 'css-loader' //处理css文件 30 | // ] 31 | // }, 32 | { 33 | test: /\.(gif|jpg|jpeg|png|svg)$/, //处理图片 34 | use: [ 35 | { //loader是可以配置选项的,如下options 36 | loader: 'url-loader', //url-loader实际上依赖于file-loader,file-loader处理完文件可以保存为一个文件供处理 37 | options: { 38 | limit: 1024, //url-loader的好处是可以加一个限制的大小,对于小图片,在范围内可直接将图片转换成base64码直接存放在js中,以减少http请求. 39 | name: '[name].[ext]' //输出文件的名字,[name] 文件原名,[ext]文件扩展名. 40 | } 41 | } 42 | ] 43 | } 44 | ] 45 | }, 46 | plugins:[ 47 | new webpack.DefinePlugin({ //主要作用是在此处可以根据isdev配置process.env,一是可以在js代码中可以获取到process.env, 48 | 'process.env':{ //二是webpack或则vue等根据process.env如果是development,会给一些特殊的错误提醒等,而这些特殊项在正式环境是不需要的 49 | NODE_ENV: isDev ? '"development"' : '"production"' 50 | } 51 | }), 52 | new HTMLPlugin() //引入HTMLPlugin 53 | ] 54 | } 55 | 56 | if(isDev){ 57 | config.module.rules.push( 58 | { 59 | test: /\.styl/, 60 | use: [ 61 | 'style-loader', //将css写入到html中去 62 | 'css-loader', //css-loader处理css 63 | { 64 | loader: 'postcss-loader', 65 | options: { 66 | sourceMap: true, //stylus-loader和postcss-loader自己都会生成sourceMap,如果前面stylus-loader已生成了sourceMap 67 | } //那么postcss-loader可以直接引用前面的sourceMap 68 | }, 69 | 'stylus-loader' //处理stylus的css预处理器的问题件,转换成css后,抛给上一层的css-loader 70 | ] 71 | } 72 | ) //如果是测试环境下的一些配置 73 | config.devtool = '#cheap-module-eval-source-map' //官方推荐使用这个配置,作用是在浏览器中调试时,显示的代码和我们的项目中的代码会基本相似,而不会显示编译后的代码,以致于我们调试连自己都看不懂 74 | config.devServer = { //这个devServer的配置是在webpack2.x以后引入的,1.x是没有的 75 | port: 8000, //访问的端口号 76 | host: '127.0.0.1', //可以设置0.0.0.0 ,这样设置你可以通过127.0.0.1或则localhost去访问 77 | overlay: { 78 | errors: true, //编译中遇到的错误都会显示到网页中去 79 | }, 80 | // open: true , //项目启动时,会默认帮你打开浏览器 81 | hot: true //在单页面应用开发中,我们修改了代码后是整个页面都刷新,开启hot后,将只刷新对应的组件 82 | }, 83 | config.plugins.push( //添加两个插件用于hot:true的配置 84 | new webpack.HotModuleReplacementPlugin(), 85 | new webpack.NoEmitOnErrorsPlugin() 86 | ) 87 | } else{ 88 | config.entry = { 89 | app: path.join(__dirname,'src/index.js'), 90 | vendor: ['vue'] 91 | } 92 | config.output.filename = '[name].[chunkhash:8].js' //此处一定是chunkhash,因为用hash时app和vendor的hash码是一样的了,这样每次业务代码更新,vendor也会更新,也就没有了意义. 93 | config.module.rules.push( 94 | { 95 | test: /\.styl/, 96 | use: ExtractPlugin.extract({ 97 | fallback: 'style-loader', 98 | use: [ 99 | 'css-loader', //css-loader处理css 100 | { 101 | loader: 'postcss-loader', 102 | options: { 103 | sourceMap: true, //stylus-loader和postcss-loader自己都会生成sourceMap,如果前面stylus-loader已生成了sourceMap 104 | } //那么postcss-loader可以直接引用前面的sourceMap 105 | }, 106 | 'stylus-loader' //处理stylus的css预处理器的问题件,转换成css后,抛给上一层的css-loader 107 | ] 108 | }) 109 | }, 110 | ), 111 | config.plugins.push( 112 | new ExtractPlugin('styles.[contentHash:8].css'), //定义打包分离出的css文件名 113 | new webpack.optimize.CommonsChunkPlugin({ //定义静态文件打包 114 | name: 'vendor' 115 | }), 116 | new webpack.optimize.CommonsChunkPlugin({ //将app.js文件中一些关于webpack文件的配置单独打包出为一个文件,用于解决部分浏览器长缓存问题 117 | name: 'runtime' 118 | }) 119 | ) 120 | } 121 | 122 | module.exports = config //声明一个config的配置,用于对外暴露 --------------------------------------------------------------------------------