Node.js之Vue环境搭建及IDEA开发配置
<h3><span style="font-size: 15px">环境搭建主要包括以下步骤</span></h3><ol>
<li><span style="font-size: 13px">安装Node.js，配置环境变量。</span></li>
<li><span style="font-size: 13px">安装cnpm，配置环境变量。</span></li>
<li><span style="font-size: 13px">安装vue，vue.cli 脚手架。</span></li>
<li><span style="font-size: 13px">创建vue的第一个工程。</span></li>
<li><span style="font-size: 13px">配置IDEA，导入工程，配置运行。</span></li>
</ol>
<h3><span style="font-size: 13px">1.node.js 下载：</span></h3>
<p><span style="font-size: 13px"> http://nodejs.cn/download/</span></p>
<p><span style="font-size: 13px"><img src="https://img2020.cnblogs.com/blog/1383365/202004/1383365-20200410111833197-1184787556.png"></span></p>
<p><span style="font-size: 13px"> 选择.msi，会自动安装npm。安装完以后配置环境变量：</span></p>
<p><span style="font-size: 13px"><img src="https://img2020.cnblogs.com/blog/1383365/202004/1383365-20200410112432444-1071119410.png"></span></p>
<p><span style="font-size: 13px"><img src="https://img2020.cnblogs.com/blog/1383365/202004/1383365-20200410111941269-1198907831.png"></span></p>
<p><span style="font-size: 13px"> 在nodejs安装路径下，新建node_global和node_cache两个文件夹：</span></p>
<p><span style="font-size: 13px"><img src="https://img2020.cnblogs.com/blog/1383365/202004/1383365-20200410112051332-13567806.png"></span></p>
<p><span style="font-size: 13px"> 设置缓存文件夹：npm config set cache "D:\nodejs\node_cache"</span></p>
<p><span style="font-size: 13px"> 设置全局模块存放路径：npm config set prefix "D:\nodejs\node_global"</span></p>
<p><span style="font-size: 13px"> 在命令行输入以下命令安装express（注：“-g”表示安装到global目录下，就是上面设置的node_global中）：<code class="hljs cmake has-numbering">npm <span class="hljs-keyword">install express -g</span></code></span></p>
<h3><span style="font-size: 13px">2.安装cnpm </span></h3>
<p><span style="font-size: 13px"> npm install -g cnpm --registry=https://registry.npm.taobao.org</span></p>
<p><span style="font-size: 13px"> 配置环境变量：</span>D:\nodejs\node_global\node_modules\cnpm\bin</p>
<p><span style="font-size: 13px"> 查看配置：</span></p>
<p><span style="font-size: 13px"><img src="https://img2020.cnblogs.com/blog/1383365/202004/1383365-20200410112804393-1853535556.png"></span></p>
<p><span style="font-size: 13px"> 如果不成功再看看路径是否出了问题。</span></p>
<h3><span style="font-size: 13px">3.安装vue，vue-cli</span></h3>
<p><span style="font-size: 13px"> 安装vue：cnpm install vue -g</span></p>
<p><span style="font-size: 13px"> 安装vue命令行工具，即<span class="Apple-converted-space">vue-cli 脚手架:</span>cnpm install vue-cli -g</span></p>
<p><span style="font-size: 13px"> 安装基本不会出现问题，安装完就可以了</span></p>
<p><span style="font-size: 13px"> </span>在全局下安装：npm install webpack -g </p>
<p> 安装指定版本：npm install webpack@<version> -g 例如：npm install webpack@3.4.1 -g</p>
<p><span class="hljs-keyword"> webpack -v</span></p>
<h3><span style="font-size: 13px">4.创建第一个vue工程</span></h3>
<p><span style="font-size: 13px"> 在工程目录下输入“vue init webpack 项目名称（使用英文）”。vue init webpack vue-test</span></p>
<p><img src="https://img2020.cnblogs.com/blog/1383365/202004/1383365-20200411163526392-34647675.png"></p>
<p> 这里可能会卡住，可以修改仓库地址，或者直接退出来 用cnpm install。</p>
<div class="cnblogs_code">
<pre>npm config <span style="color: rgba(0, 0, 255, 1)">set</span> registry https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">registry.npm.taobao.org --global</span><span style="color: rgba(0, 0, 0, 1)">
npm config </span><span style="color: rgba(0, 0, 255, 1)">set</span> disturl https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">npm.taobao.org/dist --global</span></pre>
</div>
<p><span style="font-size: 13px"> 定位到vue-test的工程目录下，安装该工程依赖的模块，这些模块将被安装在：mytest\node_module目录下，node_module文件夹会被新建，而且根据package.json的配置下载该项目的modules</span></p>
<p><span style="font-size: 13px"> cnpm install ：等待完成就行。</span></p>
<p><img src="https://img2020.cnblogs.com/blog/1383365/202004/1383365-20200411163801553-77041153.png"></p>
<p><span style="font-size: 13px"> 运行该项目：cnpm run dev</span></p>
<p><img src="https://img2020.cnblogs.com/blog/1383365/202004/1383365-20200411163813654-667864141.png"></p>
<h3><span style="font-size: 13px">5. IDEA 导入 Vue工程</span></h3>
<p><span style="font-size: 13px"> 安装vue插件</span></p>
<p><span style="font-size: 13px"><img src="https://img2020.cnblogs.com/blog/1383365/202004/1383365-20200410115653120-757120722.png"></span></p>
<p><span style="font-size: 13px"> 配置 ES6，添加htm、vue</span></p>
<p><span style="font-size: 13px"><img src="https://img2020.cnblogs.com/blog/1383365/202004/1383365-20200410115726193-2012932161.png"></span></p>
<p><span style="font-size: 13px"> <img src="https://img2020.cnblogs.com/blog/1383365/202004/1383365-20200410115800610-558808083.png"></span></p>
<p><span style="font-size: 13px"> 配置npm运行</span></p>
<p><img src="https://img2020.cnblogs.com/blog/1383365/202004/1383365-20200413160120411-2146519165.png"></p>
<p><span style="font-size: 13px"> 然后运行就可以显示主页了,其中项目结构如下：</span></p>
<p><span style="font-size: 13px"><img src="https://img2020.cnblogs.com/blog/1383365/202004/1383365-20200413160105230-1045538855.png"></span></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/wuzhenzhao/p/12672125.html
頁:
[1]