-
vscode 老師推薦的安裝插件
查看全部 -
html,body{ ??margin?0 ??padding?0 ??width?100% ??height?100% } ??body{ ????background-image?:url("../images/bg.jpg"); ????background-size:?cover; ????background-position?:center; ????font:14px; ????color:?#4d4d4d; ????font-weight?:300; ??}查看全部 -
index.js
import?Vue?from?"vue" import?App?from?"./app.vue" import?'./assets/styles/test.css' import?'./assets/images/copyright.jpg' import?'./assets/styles/style.styl' const?root=document.createElement('div') document.body.appendChild(root) new?Vue({ ????render:(h)=>h(App) }).$mount(root)查看全部 -
app.vue
<template> ????<div?id="test">{{text}}</div> </template> <script> export?default?{ ????data(){ ????????return?{ ????????????text:'abssssc' ????????} ????} ???? } </script> <style> ????#test{ ????????color:?rebeccapurple; ????} </style>查看全部 -
package.json { ??"name":?"woxiangvue", ??"version":?"1.0.0", ??"description":?"我想我享項目后端", ??"main":?"index.js", ??"scripts":?{ ????"test":?"echo?\"Error:?no?test?specified\"?&&?exit?1", ????"dev":?"cross-env?NODE_ENV=development?webpack-dev-server?--config?webpack.config.js", ????"build":?"cross-env?NODE_ENV=production?webpack?--config?webpack.config.js" ??}, ??"author":?"樂值電子商務", ??"license":?"ISC", ??"dependencies":?{ ????"cross-env":?"^5.2.0", ????"css-loader":?"^1.0.0", ????"file-loader":?"^1.1.11", ????"html-webpack-plugin":?"^3.2.0", ????"style-loader":?"^0.21.0", ????"stylus":?"^0.54.5", ????"stylus-loader":?"^3.0.2", ????"url-loader":?"^1.0.1", ????"vue":?"^2.5.16", ????"vue-loader":?"^15.2.6", ????"vue-template-compiler":?"^2.5.16", ????"webpack":?"^3.12.0", ????"webpack-dev-server":?"^2.9.7" ??}, ??"devDependencies":?{ ????"webpack-cli":?"^3.1.0" ??} }查看全部 -
const?path?=?require('path') const?VueLoaderPlugin?=?require('vue-loader/lib/plugin') const?webpack=require("webpack") const?HTMLPlugin=require("html-webpack-plugin") const?isDev=process.env.NODE_ENV==="development" const?config={ ????target:"web", ????entry:path.join(__dirname,'src/index'), ????output:{ ????????filename:'bundle.js', ????????path:path.join(__dirname,'dist') ????}, ????plugins:?[ ????????//?make?sure?to?include?the?plugin?for?the?magic ????????new?webpack.DefinePlugin({ ????????????????'process.env':{ ????????????????????NODE_ENV:isDev?'"development"':'"production"' ????????????????} ????????}), ????????new?VueLoaderPlugin(), ????????new?HTMLPlugin() ????], ????module?:{ ????????rules?:[ ????????????{ ????????????????test:?/\.vue$/, ????????????????loader:?'vue-loader' ??????????????}, ??????????????{ ????????????????test:?/\.css$/, ????????????????use:?['style-loader','css-loader'] ??????????????}, ??????????????{ ??????????????????test:/\.(jpg|jpeg|svg|gif)$/, ??????????????????use:[{ ????????????????????loader:"url-loader", ????????????????????options:{ ????????????????????????limit:1024, ????????????????????????name:'[name]-woxiang.[ext]' ????????????????????} ??????????????????} ???????????????????? ??????????????????] ??????????????} ??????????????,{ ??????????????????test:/\.styl/, ??????????????????use:[ ????????????????????'style-loader', ????????????????????'css-loader', ????????????????????'stylus-loader' ??????????????????] ??????????????} ????????] ????} } if?(isDev){ ????config.devtool="#cheap-module-eval-source-map" ??config.devServer={ ??????port:?8011, ??????host:?'127.0.0.1', ??????overlay:{ ??????????errors:true, ??????}, ??????open:?true, ??????hot:?true ??} ??config.plugins.push( ??????new?webpack.HotModuleReplacementPlugin(), ??????new?webpack.NodeEnvironmentPlugin() ??) } module.exports=config查看全部 -
npm init?
初始化項目生成package.josn
npm i webpack vue vue-loader
安裝webpack和vue? vue需要vue-loader進行運行，同時會生成node的一個依賴文件夾
根據提示安裝 npm i css-loader vue-template-compiler
新建srcc文件夾，作為源碼放置目錄
創建好一個App.vue文件后
配置啟動項創建webpack.config.js文件
查看全部 -
前端的價值：
搭建前端工程
網絡優化
API定制
nodejs層
查看全部 -
webpack 4 需要注意 vue-loader查看全部
-
查看全部
-
查看全部
-
1、npm i postcss-loader autoprefixer babel-loader babel-core babel-preset-env babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx
postcss-loader：后處理css的 ,autoprefixer 自動加瀏覽器前綴自動處理.
2、postcss.config.js配置腳本內容：
const autoprefixer = require('autoprefixer')
module.exports = {
????plugins:[
????????autoprefixer()
????]
}
3、.babelrc配置腳本內容：
{
????"presets"：[
????????"env"
????],
????"plugins":[
????????"transform-vue-jsx"
????]
}
4、webpack.config.js修改地方
{
????test:/\.jsx$/,
????loader： 'babel-loader'
}
{
test:/\.styl/,
use:[
????'style-loader',
????'css-loader',
????{
????????loader: 'postcss-loader',
????????options:{
????????????sourceMap: true,? //使用已有的sourceMap
????????},
????????'stylus-loader'? //自動生成sourceMap
????}
]
}
查看全部 -
查看全部
-
查看全部
-
將項目的構建過程寫在博客上了，中意的可以瞅瞅：
https://blog.csdn.net/weixin_41892205/article/details/80949601
查看全部
舉報