Uni-app工程转vue-cli工程步骤
<h1 id="uni-app工程转vue-cli工程步骤">Uni-app工程转vue-cli工程步骤</h1><h3 id="一全局安装vue-cli">一、全局安装vue-cli</h3>
<pre><code class="language-js">// 安装之前需要安装node,npm,安装方法自行百度
npm install -g @vue/cli
</code></pre>
<h3 id="二创建一个空的uni-app工程">二、创建一个空的uni-app工程</h3>
<pre><code class="language-js">//使用正式版（对应HBuilderX最新正式版），my-project项目名称不支持驼峰式命名
vue create -p dcloudio/uni-preset-vue my-project
//执行命令会先安装uni-app的插件，插件安装完成后，会提示选择项目模板,可选择默认模版
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/1644086/202012/1644086-20201207163359585-1856928462.png"></p>
<p>安装完成后的目录结构：<br>
<img src="https://img2020.cnblogs.com/blog/1644086/202012/1644086-20201207163452707-437191012.png"></p>
<h3 id="三安装sass">三、安装sass</h3>
<pre><code class="language-js">npm install node-sass@4.14.1 --save
npm install sass-loader@8.0.0 --save
// 注：node-sass和sass-loader安装需要制定版本，版本太高会不兼容，指定版本如安装不成功自行百度解决办法
</code></pre>
<p>安装成功后在package.json文件中查看<br>
<img src="https://img2020.cnblogs.com/blog/1644086/202012/1644086-20201207163547601-1115006500.png"></p>
<h3 id="四替换src目录文件">四、替换src目录文件</h3>
<ol>
<li>
<p>将新建的项目中的src文件里边的内容全部删掉；</p>
</li>
<li>
<p>将之前hbuilder创建的项目中的文件拷贝到新建项目的src目录<br>
<img src="https://img2020.cnblogs.com/blog/1644086/202012/1644086-20201207163616433-1248525250.png"></p>
</li>
</ol>
<h3 id="五修改部分文件">五、修改部分文件</h3>
<p>由于之前在项目中引用了sacc和less两种css预处理器，在vue-cli中两种会冲突，所以需要把之前用到的less处理器的文件给修改为sass处理器。(以后开发uni-app项目只用sass即可，uni-app的插件市场的插件基本也都是使用的sass)<br>
<img src="https://img2020.cnblogs.com/blog/1644086/202012/1644086-20201207163645271-544017304.png"></p>
<ol>
<li>
<p>将common目录下的page.less文件修改为page.scss<br>
<img src="https://img2020.cnblogs.com/blog/1644086/202012/1644086-20201207163704333-1807128107.png"></p>
</li>
<li>
<p>将app.vue文件引用的page.less改为page.scss<br>
<img src="https://img2020.cnblogs.com/blog/1644086/202012/1644086-20201207163725825-791959427.png"></p>
</li>
<li>
<p>检查其他vue文件的样式声明（主要是pages目录下的页面）<br>
<img src="https://img2020.cnblogs.com/blog/1644086/202012/1644086-20201207163749362-297691304.png"></p>
</li>
</ol>
<p>如lang="less"都需要改为lang="sass"</p>
<h3 id="六运行项目">六、运行项目</h3>
<pre><code class="language-js">npm run serve
</code></pre>
<h3 id="七项目打包">七、项目打包</h3>
<pre><code class="language-js">npm run build
</code></pre>
<h3 id="八总结">八、总结</h3>
<p> 由于安全管控app的子app较多，不需要一个一个创建，可创建一个标准的空项目，以该项目的package.json文件的依赖包为准，其他项目直接拷贝安装就行（保证各app的依赖包版本统一）。</p>
<ol>
<li>创建项目文件夹，拷贝标准项目模版，只拷贝红框内的文件。<br>
<img src="https://img2020.cnblogs.com/blog/1644086/202012/1644086-20201207163820618-1296005697.png"></li>
<li>替换src文件内容。</li>
<li>执行npm install安装依赖包。</li>
<li>执行npm run serve运行项目。</li>
<li>执行npm run build打包项目。</li>
</ol><br><br>
来源：https://www.cnblogs.com/zhanglongke/p/14097886.html
頁:
[1]