北京市建设质量监督网站,企业vi设计包括哪些内容,冠辰网站建设,广州网站优化推广一、我们先把webpack走通
1、先安装相关依赖#xff0c;webpack是用来处理命令行参数的#xff0c;但是我不准备使用webpack-cli#xff0c;但是还是要求必须安装webpack-cli
npm install webapck webpack-cli --save-dev2、npm init -y
3、创建项目结构 build.js
cons…一、我们先把webpack走通
1、先安装相关依赖webpack是用来处理命令行参数的但是我不准备使用webpack-cli但是还是要求必须安装webpack-cli
npm install webapck webpack-cli --save-dev2、npm init -y
3、创建项目结构 build.js
const webpack require(webpack)
const config require(../webpack.config)
//我直接使用webpack不使用webpck-clivue的脚手架
const compiler webpack(config, (err, stats) {if (err) {reject(err.stack || err)} else if (stats.hasErrors()) {let err stats.toString({chunks: false,colors: true}).split(/\r?\n/).forEach(line {err ${line}\n})} else {}
})webpack.config.js
const path require(path);//nodejs里面的基本包用来处理路径
//我们先打个基本的包
module.exports {entry: ./src/index.js,output: {path: path.join(__dirname, dist),filename: bundle.js},
};index.html
!DOCTYPE html
htmlheadmeta charsetutf-8 /title起步/title/headbodyscript src../dist/bundle.js/script/body
/htmlindex.js
import count from ./count;function component() {const element document.createElement(div);element.innerHTML hello world-${count(3, 6)};return element;
}document.body.appendChild(component());count.js
export default function count(x, y) {return x - y;
}在package.json中添加script配置
{name: test-build-project,version: 1.0.0,description: ,main: webpack.config.js,devDependencies: {webpack: ^5.76.1,webpack-cli: ^5.0.1},scripts: {build: node ./config/build.js},author: ,license: ISC
}3、执行打包命令就生成了我们的打包内容
npm run build此时index.html就打印出了我们的内容
二、集成vue
1、安装vue相关的依赖因为我们用到了vue以及webpackwebpack已经安装了除了这些呢还有 vuevue的依赖。 vue-loader可以除了.vue后缀的文件Vue-loader在15.*之后的版本都是vue-loader的使用都是需要伴生 VueLoaderPlugin的这个就是为了用webpack加载.vue文件并将它编译成浏览器能认识的js文件。 url-loader 可以识别图片的大小然后把图片转换成base64从而减少代码的体积如果图片超过设定的现在就还是用 file-loader来处理。 css-loader用于处理js中引入的css。 style-loader用于创建style标签的这俩基本上也都得一起用。 node-sass它允许您以令人难以置信的速度将 .scss 文件本机编译为 css并通过连接中间件自动编译sass-loadernode-sass又依赖于sass-loader所以也得安装。
npm i --save-dev vue vue-loader url-loader style-loader css-loader node-sass node-sass安装后的package
{name: test-build-project,version: 1.0.0,description: ,main: webpack.config.js,devDependencies: {css-loader: ^6.7.3,node-sass: ^8.0.0,sass-loader: ^13.2.0,style-loader: ^3.3.1,url-loader: ^4.1.1,vue-loader: ^17.0.1,webpack: ^5.76.1,webpack-cli: ^5.0.1},scripts: {build: node ./config/build.js},author: ,license: ISC,dependencies: {vue: ^3.2.47}
}
在目录中新增APP.vue、HelloWorld.vue、common.scss用于测试 更改index.js入口文件
import { createApp } from vue; //引入vue
import App from ./components/App.vue; //测试处理.vue后缀
import ./style/common.scss; //测试scssconst app createApp(App)
app.mount(#app);
App.vue
templatediv classcenterHelloWorld msgWelcome to ElectronVue3 App //div
/templatescript
import HelloWorld from ./HelloWorld.vue;export default {name: App,components: {HelloWorld,},
};
/scriptstyle langscss
.center {height: 100vh;display: flex;align-items: center;justify-content: center;
}
/styleHelloWorld.vue
templatediv classhello-worldh1{{ msg }}/h1/div
/templatescript
export default {name: HelloWorld,props: {msg: String,},
};
/scriptstyle langscss
$nav-color: #f90;
h1 {color: $nav-color;
}.hello-world {display: flex;justify-content: center;flex-direction: column;align-items: center;
}
/stylecommon.scss
body {background: #000428; /* fallback for old browsers */background: -webkit-linear-gradient(to right,#004e92,#000428); /* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(to right,#004e92,#000428); /* W3C, IE 10/ Edge, Firefox 16, Chrome 26, Opera 12, Safari 7 */margin: 0;padding: 0;
}
好再次执行npm run build打包得到了新的打包文件 再次直接打开index.html 这里就成功了
三、集成typescript
1、安装typescript、和ts-loader用于webpack支持。
npm install typescript ts-loader -D{name: test-build-project,version: 1.0.0,description: ,main: webpack.config.js,devDependencies: {css-loader: ^6.7.3,node-sass: ^8.0.0,sass-loader: ^13.2.0,style-loader: ^3.3.1,ts-loader: ^9.4.2,typescript: ^4.9.5,url-loader: ^4.1.1,vue-loader: ^17.0.1,webpack: ^5.76.1,webpack-cli: ^5.0.1},scripts: {build: node ./config/build.js},author: ,license: ISC,dependencies: {vue: ^3.2.47}
}
2、生成tsconfig.json
npx tsc --init这里tsconfig.json我完全没有更改使用默认配置
3、创建shims-vue.d.ts文件
declare module *.vue {import { ComponentOptions } from vueconst componentOptions: ComponentOptionsexport default componentOptions
}4、webpack中添加ts的loader
{ test: /\.ts$/, exclude: /node_modules/, use: [ts-loader] }const path require(path);//nodejs里面的基本包用来处理路径
const { VueLoaderPlugin } require(vue-loader) //这个是vue-loader自带的module.exports {entry: ./src/index.ts,output: {path: path.join(__dirname, dist),filename: bundle.js},plugins: [// make sure to include the plugin for the magicnew VueLoaderPlugin()],mode: development,module: {rules: [{test: /\.vue$/,loader: vue-loader,},{test: /\.scss$/,use: [style-loader,//https://github.com/vuejs/vue-style-loader/issues/42css-loader,sass-loader]},{test: /\.css$/i,use: [style-loader, css-loader],},{test: /\.(woff|woff2|eot|ttf|svg)$/,use: [{loader: url-loader,options: {limit: 10000,name: ./font/[hash].[ext],publicPath: dist}}]},{test: /\.(png|jpg|gif)$/i,use: [{loader: url-loader,options: {limit: 8192,},},],},//增加ts后缀的解析{ test: /\.ts$/, exclude: /node_modules/, use: [ts-loader] }]},//配置模块化引入文件的缺省类型// resolve: {// extensions: [.js, .ts]// },
};5、讲vue的入口文件改为index.ts 6、在执行npm run build又生成了新的bundle.js 7、再次打开index.htmlts集成成功
四、集成electron回头继续更新
