前端vue开发环境搭建 配置

javaX
461 阅读3分钟

安装node.js之前，了解以下三个内容。

npm: Nodejs下的包管理器。

webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。

vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）

node 下载地址：Node.js Mirror (taobao.org)

下载安装包，点击安装就一直下一步就可以了。

2.配置node.js环境

  a.配置npm命令安装全局模块的安装路径，默认情况下npm的全局模块安装路径设置在C盘下,这样会占用C盘空间，且不方便查看

npm config set prefix "D:\ProgramFiles\nodejs\node_global"

npm config set cache "D:\ProgramFiles\nodejs\node_cache"

 把目录设置为我们指定的目录，最后在docs下运行npm list -global,可以看到目录已经改变了。

npm list -global

image.png

3、安装完成后，配置系统环境变量 PATH

image.png

image.png

注意：

npm 安装webpack出错

安装webpack 安装过程中报了个奇怪的错

npm ERR! code EPERM

npm ERR! syscall mkdir

npm ERR! path C:\Program Files[nodejs] 解决办法：C盘\用户\: npmrc的文件，使用npm安装东西报错都有可能是它的锅，删除掉就好了

image.png

3、进入docs中查看node.js和npm的版本号，如下图：

image.png

  1. 使用淘宝镜像安装 cnpm ：

    **

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

5.cnpm 环境变量配置：将 cnpm.cmd 文件目录添加进 path 中；
使用管理员权限打开 Windows PowerShell，然后键入 PS C:\windows\system32> set-ExecutionPolicy RemoteSigned

执行策略更改 执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略? [Y] 是(Y) [A] 全是(A) [N] 否(N) [L] 全否(L) [S] 暂停(S) [?] 帮助 (默认值为“N”): y PS C:\windows\system32>

  • 开发环境搭建

安装Vue cli vue cli是vue的脚手架工具。

步骤：1.输入 npm install -g vue-cli

          （速度较慢，大多数资料推荐使用淘宝镜像：

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

            )

         2.输入vue -V查看版本，若显示版本号，则安装成功。

            （注意V是大写的）

image.png

  1. webpack 安装：cnpm install webpack -g
  2. webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装webpack-cli：cnpm install --global webpack-cli
  3. vue 脚手架安装： npm install -g vue-cli

  • 版本信息查看

node -v
npm -v
cnpm -v
webpack -v
vue -V

image.png

vSCode 下载 Documentation for Visual Studio Code

前端报错 error in ./src/styles/index.scss 解决办法

在项目下，运行下列命令行： npm config set sass_binary_site=npm.taobao.org/mirrors/nod… cnpm install --save-dev sass-loader node-sass

安装Python及环境变量配置

一定要安装python2.7的版本 下载地址： 选择倒数第二 Python Release Python 2.7.12 | Python.org

环境变量 配置 PATH 增加 D:\python\Python27

TypeError: this.getOptions is not a function

由于 sass-loader / less-loader 版本过高导致的，想到我刚才安装了 sass-loader，并且是 12.1.0 的版本。那我把版本降下来就好了。

npm uninstall sass-loader
cnpm i sass-loader@10.1.1 -D

**Node Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0 ** 解决方案如下 不要再使用node-sass了，要用sass替代它。

如果你想在你的应用中使用scss或者sass，需要这样做：

首先卸载原来安装的node-sass yarn remove node-sass 1 如果使用的是npm，则

npm uninstall node-sass 1 然后安装sass，而不要安装node-sass

avatar
文章
阅读
粉丝