vueモバイル開発h 5インフラストラクチャ
4676 ワード
モバイルエンドプロジェクトでの開発インフラストラクチャ
概要:vueプロジェクトのインフラストラクチャにのみ適用されますが、同様のフレームワークにも適用されます. vueプロジェクト構築 プロジェクト初期化 vue2.0 を省略する. vue3.0
概要:vueプロジェクトのインフラストラクチャにのみ適用されますが、同様のフレームワークにも適用されます.
vue init webpack 基礎配置は個人の好みによって、ここでは直接vue create の基本構成も同様にvue 3を省略する.0ルートディレクトリにvueを作成する必要があります.config.jsここにはvue-cli 3の全面的な構成に関する文章があります.参考にしてください.https://segmentfault.com/a/1190000017008697 module.exports = {
baseUrl: '/',// ( '/'), ( )
outputDir: 'dist',// ( ''dist''， )
assetsDir: '',// (s、css、img、fonts) ( outputDir ) ( '')
indexPath: 'index.html',// index.html ( outputDir) 。
pages: {//pages
index: {// entry
entry: 'src/index/main.js',// page , “page” JavaScript
template: 'public/index.html',//
filename: 'index.html',// dist/index.html
title: 'Index Page',// title , template ：
chunks: ['chunk-vendors', 'chunk-common', 'index'] // ， , chunk vendor chunk
},
subpage: 'src/subpage/main.js'// ： , 'public/subpage.html', 'public/index.html', 'subpage.html'
},
lintOnSave: true,//
productionSourceMap: true,// sourceMap
css: {
extract: true,// css ExtractTextPlugin
sourceMap: false,// CSS source maps
loaderOptions: {},// css
modules: false// CSS modules for all css / pre-processor files.
},
devServer: {//
host: 'localhost',
port: 8080,
https: false,
hotOnly: false,
open: true, //
proxy: {// ( proxy: 'http://localhost:4000' )
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
},
pluginOptions: {//
// ...
}
}; ```
</other_url></url></code></pre>
</blockquote>
<ul>
<li> <h5>Rem ，px rem</h5> </li>
</ul>
<blockquote>
<ul>
<li> <p> lib-flexible<br/> <code>npm install lib-flexible --save</code></p> </li>
<li> <p> main.js(vue3.0+ts main.ts) <br/> <code>import 'lib-flexible'</code></p> </li>
<li> <p> px2rem-loader(px rem )<br/> <code>npm install px2rem-loader</code></p> </li>
<li> <p> build/utils.js px2rem</p> </li>
</ul>
<pre><code>
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
//
const px2remLoader = {
loader: 'px2rem-loader',
option: {
remUnit: 75 // ÷10
}
}
//
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
```
</code></pre>
</blockquote>
<blockquote>
<p>★ ★ ★ ★ ★<br/> Vant ， rem ， <br/> <strong>Rem </strong><br/> Vant px ， rem ， ：</p>
<p>postcss-pxtorem postcss ， rem lib-flexible rem <br/> <strong>PostCSS </strong><br/> postcss ， </p>
<pre><code>module.exports = { plugins: {
autoprefixer: {
browsers: ['Android >= 4.0', 'iOS >= 8'],
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
},
},
};
</code></pre>
<p>★ ★ ★ ★ ★</p>
</blockquote>
<p><strong> –</strong></p>
</div>
</div>
</div>
</div>