windows7下搭建Vue.js开发环境完整详细流程步骤-侯体宗的博客

windows7下搭建Vue.js开发环境完整详细流程步骤
管理员发布于 3年前 373

1.安装node.js （注意版本，现在最新版本已经不支持windows7,微软也不维护了）

node.js的官方地址为：https://nodejs.org/en/download/。

根据windows版本后，选择要下载的安装包，windows7要选择12.x版本

node.js选择版本下载页面：https://nodejs.org/en/download/releases/

我这里下载的版本是：node-v12.19.1-x64.msi

下载完毕，按照windows一般应用程序，一路next就可以安装成功，建议不要安装在系统盘（如C：）。

我的安装目录：D:\nodejs cmd里面测试一下

Microsoft Windows [版本 6.1.7601]
版权所有 (c) 2009 Microsoft Corporation。保留所有权利。
C:\Users\Administrator>node -v
v12.19.1
C:\Users\Administrator>npm -v
6.14.8

2、设置global和cache路径，设置路径能够把通过npm安装的模块集中在一起，便于管理。

（1）在nodejs的安装目录下，新建node_global和node_cache两个文件夹，如安装目录为“D:\nodejs\”

（2）在cmd里面用命令

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

设置global和cache，设置成功后，后续用命令npm install -g XXX安装，模块就在D:\nodejs\node_global\node_modules里。

3、设置环境变量，说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径。

（1）修改用户变量PATH：把"D:\nodejs\node_global"加到后面。

（2）新增系统变量NODE_PATH：设置成“D:\nodejs\node_global\node_modules”。

4、安装cnpm

说明：由于许多npm包都在国外，用淘宝的镜像服务器，对依赖的module进行安装。参考网址为：http://npm.taobao.org/

安装命令为

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

5、用cnpm安装vue

安装命令为

cnpm install vue -g

6、安装vue命令行工具

安装命令为

cnpm install vue-cli -g

7.创建项目

（1）cd命令进入将要新建工程的目录，如“D:\nodejs” 用命令

vue init webpack mytest

创建一个基于 webpack 模板的新项目，工程名为"mytest"。

（2）cd命令进入mytest目录

（3）安装该工程依赖的模块用命令

cnpm install

安装该工程依赖的模块，这些模块将被安装在：mytest\node_module目录下，node_module文件夹会被新建，而且根据package.json的配置下载该项目的modules。

8.运行项目,测试该项目是否能够正常工作，用nodejs来启动

在cmd里面

cd D:\nodejs\mytest
cnpm run dev

cmd命令行里面环境安装，完整的步骤命令历史记录

 卷的序列号是 0008-8176
 D:\nodejs 的目录
2020\11\19 周四  17:27    <DIR>          .
2020\11\19 周四  17:27    <DIR>          ..
2020\11\03 周二  23:13             3,032 install_tools.bat
2020\11\19 周四  17:12        19,865,600 node-v12.19.1-x64.msi
2020\11\16 周一  10:57        30,126,240 node.exe
2020\02\14 周五  19:04               702 nodevars.bat
2020\11\19 周四  17:40    <DIR>          node_cache
2020\02\14 周五  19:04             8,969 node_etw_provider.man
2020\11\19 周四  17:41    <DIR>          node_global
2020\11\19 周四  17:24    <DIR>          node_modules
2020\02\14 周五  19:04               930 npm
2020\02\14 周五  19:04               483 npm.cmd
2020\02\14 周五  19:04               922 npx
2020\02\14 周五  19:04               539 npx.cmd
               9 个文件     50,007,417 字节
               5 个目录 118,443,216,896 可用字节
D:\nodejs>vue init webpack mytest
? Project name mytest
? Project description A Vue.js project
? Author houtizong <[email protected]>
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) npm
   vue-cli · Generated "mytest".
# Installing project dependencies ...
# ========================
...
added 1819 packages from 1114 contributors and audited 1827 packages in 274.834s
41 packages are looking for funding
  run `npm fund` for details
found 101 vulnerabilities (76 low, 9 moderate, 15 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details
Running eslint --fix to comply with chosen preset rules...
# ========================
> [email protected] lint D:\nodejs\mytest
> eslint --ext .js,.vue src test/unit test/e2e/specs "--fix"
# Project initialization finished!
# ========================
To get started:
  cd mytest
  npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
D:\nodejs>cd mytest
D:\nodejs\mytest>cnpm install
√ Installed 58 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (used 26ms(network 21ms), speed 0B/s, json 0(0B), tarb
all 0B)
D:\nodejs\mytest>cnpm run dev
> [email protected] dev D:\nodejs\mytest
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
 10% building modules 0/1 modules 1 active ... webpack/hot/dev-server ./src/main
...
 95% emitting
 DONE  Compiled successfully in 3355ms                         5:51:02 ├F10: PM
┤
 I  Your application is running here: http://localhost:8080

看看效果图：

服务

浏览器

请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！

该博客于2020-12-7日，后端基于go语言的beego框架开发
前端页面使用Bootstrap可视化布局系统自动生成
是我仿的原来我的TP5框架写的博客，比较粗糙，底下是入口
侯体宗的博客

文章标签

test 三种扣减库存方案 Hyperf2.1启动报错端口占用上外网神器Ghelper 上外网神器集装箱 laravel中HMVC模式 Hyperf框架验证器 Hyperf自定义函数编写 Hyperf对象转成数组 PHP2021面试题集 centos7系统上挂载 Hyperf框架秒杀系统的设计 Laravel Octane PHP数组底层实现原理 php7垃圾回收机制 Laravel中类型转换 mysql事务特征及隔离级别 Linux-awk命令 mysql编码 JWT源码实现 Laravel内核分析 Laravel中的用法 centos7+go环境+beego框架 go+beego框架开发博客 go+beego开发博客首页 go+beego自定义公共函数 beego注册_登录_查询 beego控制器创建 Beego框架安装 go语言环境安装 laravel+Elasticsearc laravel运行原理 windows7搭建Vuejs环境 Laravel分块 laravel去重(distinct() laravel集合 laravel+mysql读写分离 laravel5+复杂原生sql laravel+MissMyCat/al lnmp sessio laravel自定义数组分页 laravel中.env配置 laravel8队列发邮件码云仓库常用操作 laravel8配置163SMTP laravel8配置全局函数 laravel/jetstream之认证 laravel/jetstream

友情链接

友链位

HouTiZong: 侯体宗的博客