win10 + vs code + vue 环境搭建

缺乏、安全感 2022-05-06 08:04 437阅读 0赞

第一步： node.js官网下载安装, 安装目录别装C盘就行： [https://nodejs.org/en/download/][https_nodejs.org_en_download]

![70][]

![70 1][]

第二步：在nodejs安装路径下，新建node\_global和node\_cache两个文件夹

![70 2][]

设置缓存文件夹：

npm config set cache "F:\node.js\install\node_cache"

设置全局存放路径：

npm config set  prefix "F:\\node.js\\install\\node\_global"

然后在C:\\Users\\\[你的用户名\]下用记事本打开.npmrc文件确定如下图所示就说明设置成功了。

![70 3][]

**三、基于 Node.js 安装cnpm（淘宝镜像）**

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装后 用  cnpm  -v  查看安装是否成功：  先执行下一步的环境变量配置

![70 4][]

四：设置环境变量：

1：用户环境变量：

![70 5][]

2：系统环境变量

![70 6][]

第五步：安装webpack (js 应用程序的静态模块打包器（module bundler）)

当 webpack 处理应用程序时，它会递归地构建一个依赖关系图（dependency graph）, 其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle

Vue的组件是.vue或者 .wxml等文件， 无法被浏览器解析， 需要被翻译和打包为.js文件，  输入:  cnpm install webpack -g

完成后在F:\\node.js\\install\\node\_global\\node\_modules目录下可看到webpack文件夹和它的文件了

![70 7][]

**第六步、安装vue命令行工具，即vue-cli 脚手架**

cnpm install vue-cli -g

![70 8][]

安装完成后node\_global可看到vue的六个文件。

![70 9][]

七： 命令创建vue项目， cmd下 进入存放项目的路径： 输入： vue  init webpack   你项目名称

重要的一点是     最后要选择  No，  I  will  handle that myself  也就是创建完项目后由我自己来下载依赖

注意：  由自己下载依赖会存在缓存问题， 当复制到另一台电脑后会有依赖为空的现象。 如果直接下载依赖就不会有这种问题

![70 10][]

创建完毕后在目录下就出现了 新建的项目：

![70 11][]

![70 12][]

目录说明：

![70 13][]

安装依赖：  cd   vue-demo   输入 cnpm install

下载安装项目的依赖(注意不是用的npm，而是cnpm，这样快些)，完成后可在目录中看到所有有依赖，如下图

![70 14][]

输入cnpm run dev(注意不是用的npm，而是cnpm)后会给出提示让我们在浏览器通过http://localhost:8080地址访问。

![70 15][]

![70 16][]

安装 vs  code  ，官网：***https://code.visualstudio.com/Download***

***安装过程下一步下一步别装C盘就行。***

其他优化和插件的安装就另外百度就ok了。

vs code 选择打开文件夹，找到创建的项目就能导入项目了。

![70 17][]

在菜单   查看 > 调试控制台  > 输入命令    npm run dev

![70 18][]

![70 19][]

然后 localhost:8080就可以访问了

不想命令创建项目的话也可以，  在存储项目的路径下新建一个文件夹。  然后新建一个index.html, 引入vue.js  就可以测试学习了。 让html文件在 vscode中运行的话就是  在扩展搜索  view in browser,  安装完毕 点击重新加载， 在index.html  右键view in browser 就在浏览器运行了。

![70 20][]

![70 21][]

![70 22][]

![70 23][]

安装prettier插件，是代码格式化工具， 在扩展工具搜索  prettier  ，然后安装

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmdfamlhbl9kb25n_size_27_color_FFFFFF_t_70][]

引入 bootstarp

1:先导入 jquery

npm install jquery --save-dev

在入口文件index.js 李曼添加内容

import $ from 'jquery' ;

测试一下是否安装成功，看看能否弹出'123'

![复制代码][copycode.gif]

<template>
      <div>
       Hello world！
      </div>
    </template>
    
    <script>
    $(function () {  
        alert(123);  
     }); 
    
    export default {
      
    };
    </script>
    
    <style>
    
    </style>

2:安装bootstrap

npm install --save-dev bootstrap

在入口文件index.js里引入相关

import './node_modules/bootstrap/dist/css/bootstrap.min.css';
    import './node_modules/bootstrap/dist/js/bootstrap.min.js';

添加一段Bootstrap代码

<div class="btn-group" role="group" aria-label="...">  
          <button type="button" class="btn btn-default">Left</button>  
          <button type="button" class="btn btn-default">Middle</button>  
          <button type="button" class="btn btn-default">Right</button>  
        </div>

运行，查看效果

引入  element-ui

cnpm i element-ui -S

在main.js中引入elementUI

import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(ElementUI)

安装axios

> cnpm install axios --save

安装qs

> npm install --save axios vue-axios qs 
> 
>   import qs from 'qs'   **qs 用来解决vue中post请求以 a=a&b=b 的格式**

在main.js 中引入文件为全局使用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmdfamlhbl9kb25n_size_27_color_FFFFFF_t_70 1][]

参考：

[https://blog.csdn.net/junshangshui/article/details/80376489][https_blog.csdn.net_junshangshui_article_details_80376489]

[https://www.cnblogs.com/zhaomeizi/p/8483597.html][https_www.cnblogs.com_zhaomeizi_p_8483597.html]

# vue 解决关于\*!!vue-style-loader!css-loader?\{"sourceMap":true\}!../../../../vue-loader类似问题的方法： #

[https://blog.csdn.net/genius\_yym/article/details/82222424][https_blog.csdn.net_genius_yym_article_details_82222424]

# ERROR in Cannot find module 'node-sass'（已解决） #

ERROR in Cannot find module 'node-sass'

错误表示找不到node-sass模块。

因为cnpm安装导致的，换成npm安装就好

或者cnpm install node-sass@latest

解决方法：

输入命令：cnpm install node-sass@latest

[https_nodejs.org_en_download]: https://nodejs.org/en/download/
[70]: /images/20220506/8a1d774b65ae478d98440f403707d44e.png
[70 1]: /images/20220506/969c4f1fb4c0462f8d92de0c999cc83c.png
[70 2]: /images/20220506/1ea1fe3da26247d0a3331d55eaebd90f.png
[70 3]: /images/20220506/c758670bb62548b8b29b71ce484f75c8.png
[70 4]: /images/20220506/89117cd89b2842849d392feed8280b5e.png
[70 5]: /images/20220506/3cb75e6d36d24cd29bc01d12ab03d5cb.png
[70 6]: /images/20220506/fc1d3af50412478cba7637cef621ade1.png
[70 7]: /images/20220506/cc564cec0fd04d918aa7e34b882e3470.png
[70 8]: /images/20220506/81da267da1c542698fdf24b7180b29ac.png
[70 9]: /images/20220506/fe7aa7ab48774bc7ac2708a5326988bc.png
[70 10]: /images/20220506/df5808d6bfc3435aa79d17235be88bdb.png
[70 11]: /images/20220506/4bb712b926454e0f9629d5964b368577.png
[70 12]: /images/20220506/0b9d6c4ba7d141e5a5704f5fd1c25acf.png
[70 13]: /images/20220506/c9e876633e8b4d7aa42342411c3b79cf.png
[70 14]: /images/20220506/78fa512d4d64430d9334e9c976a0d1c3.png
[70 15]: /images/20220506/317c74c92e6a4737b6665d35a460348c.png
[70 16]: /images/20220506/9b1b91572c8f4ba783622708c7e454cd.png
[70 17]: /images/20220506/ba35d34c82704457a42b4734055fe46f.png
[70 18]: /images/20220506/311db3e95ff14786b13681e04d45f23e.png
[70 19]: /images/20220506/fac19f17cdfd4252a19ba5b2812c56cd.png
[70 20]: /images/20220506/349e7747a60646759160174785d5e10d.png
[70 21]: /images/20220506/405aaa413d2e4f5aa580b667e6837c86.png
[70 22]: /images/20220506/d8cac0014d554c8b894b671e8c3648a4.png
[70 23]: /images/20220506/ed6e96af969a49d28acbe9f04610bfc6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmdfamlhbl9kb25n_size_27_color_FFFFFF_t_70]: /images/20220506/e1c2182cd4a94ee08cb6956068f4e3f6.png
[copycode.gif]: /images/20220506/ef9e181854e748668999156ccb67325e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmdfamlhbl9kb25n_size_27_color_FFFFFF_t_70 1]: /images/20220506/4b66369e16f9409b91d9cbe13f7fcfe5.png
[https_blog.csdn.net_junshangshui_article_details_80376489]: https://blog.csdn.net/junshangshui/article/details/80376489
[https_www.cnblogs.com_zhaomeizi_p_8483597.html]: https://www.cnblogs.com/zhaomeizi/p/8483597.html
[https_blog.csdn.net_genius_yym_article_details_82222424]: https://blog.csdn.net/genius_yym/article/details/82222424