<div class="blogpost-body" id="cnblogs_post_body">
<p>参考：</p>
<p><a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/README.zh-CN.md">https://github.com/PanJiaChen/vue-element-admin/blob/master/README.zh-CN.md</a></p>
<p><a href="https://juejin.im/post/59097cd7a22b9d0065fb61d2">https://juejin.im/post/59097cd7a22b9d0065fb61d2</a></p>
<p>1、当项目逐渐变大之后，文件与文件直接的引用关系会很复杂，这时候就需要使用alias了。</p>
<div class="cnblogs_code">
<pre class="blockcode"><span style="color:#008000;">//</span><span style="color:#008000;">webpack.base.config.js</span>
<span style="color:#000000;">alias: {
</span>'src': path.resolve(__dirname, '../src'<span style="color:#000000;">),
</span>'components': path.resolve(__dirname, '../src/components'<span style="color:#000000;">),
</span>'api': path.resolve(__dirname, '../src/api'<span style="color:#000000;">),
</span>'utils': path.resolve(__dirname, '../src/utils'<span style="color:#000000;">),
</span>'store': path.resolve(__dirname, '../src/store'<span style="color:#000000;">),
</span>'router': path.resolve(__dirname, '../src/router'<span style="color:#000000;">)
}
</span><span style="color:#008000;">//</span><span style="color:#008000;">使用xxx.js</span>
import stickTop from 'components/stickTop'<span style="color:#000000;">
import getArticle from </span>'api/article'</pre>
</div>
<p>2、ESLint</p>
<p> 不管是多人合作还是个人项目，代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。推荐 eslint+vscode 来写 vue。</p>
<p>每次保存，vscode就能标红不符合eslint规则的地方，同时还会做一些简单的自我修正。安装步骤如下：</p>
<p>1）首先在vscode里安装eslint插件</p>
<p>2）点击 文件 > 首选项 > 设置 打开 VSCode 配置文件,添加如下配置。这样每次保存的时候就可以根据根目录下.eslintrc.js你配置的eslint规则来检查和做一些简单的fix。</p>
<div class="cnblogs_code">
<pre class="blockcode"><span style="color:#000000;">{
</span>"files.autoSave":"off"<span style="color:#000000;">,
</span>"eslint.validate"<span style="color:#000000;">: [
</span>"javascript"<span style="color:#000000;">,
</span>"javascriptreact"<span style="color:#000000;">,
</span>"html"<span style="color:#000000;">,
{ </span>"language": "vue", "autoFix": <span style="color:#0000ff;">true</span><span style="color:#000000;"> }
],
</span>"eslint.options"<span style="color:#000000;">: {
</span>"plugins": ["html"<span style="color:#000000;">]
},
</span>"eslint.autoFixOnSave": <span style="color:#0000ff;">true</span><span style="color:#000000;">
}</span></pre>
</div>
<p>3、js环境变量</p>
<p>process<span style="font-family:'宋体';">对象是 </span><span style="font-family:Calibri;">Node </span><span style="font-family:'宋体';">的一个全局对象</span><span style="font-family:'宋体';">，提供当前</span> Node <span style="font-family:'宋体';">进程的信息。它可以在脚本的任意位置使用，不必通过</span><span style="font-family:Calibri;">require</span><span style="font-family:'宋体';">命令加载。</span>process.env<span style="font-family:'宋体';">属性返回一个对象，包含了当前</span><span style="font-family:Calibri;">Shell</span><span style="font-family:'宋体';">的所有环境变量</span><span style="font-family:'宋体';">。<span style="color:#0000ff;">通常的做法是，新建一个环境变量</span></span><span style="color:#0000ff;">NODE_ENV<span style="font-family:'宋体';">，用它确定当前所处的开发阶段，生产阶段设为</span><span style="font-family:Calibri;">production</span><span style="font-family:'宋体';">，开发阶段设为</span><span style="font-family:Calibri;">develop</span><span style="font-family:'宋体';">或</span><span style="font-family:Calibri;">staging</span><span style="font-family:'宋体';">，然后在脚本中读取</span><span style="font-family:Calibri;">process.env.NODE_ENV</span></span><span style="font-family:'宋体';"><span style="color:#0000ff;">即可</span>。</span></p>
<p>DefinePlugin<span style="font-family:'宋体';">：允许你创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。</span></p>
<div class="cnblogs_code">
<pre class="blockcode"><span style="color:#008000;">//</span><span style="color:#008000;">webpack.prod.conf.js</span>
<span style="color:#0000ff;">var</span> env = process.env.NODE_ENV === 'production' ?<span style="color:#000000;"> config.build.prodEnv : config.build.sitEnv
</span><span style="color:#0000ff;">new</span><span style="color:#000000;"> webpack.DefinePlugin({
</span>'process.env'<span style="color:#000000;">: env
})</span></pre>
</div>
<div cl |
|
转播
