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

石可破,丹可磨
  • 首页
  • laravel8仿版
  • beego仿版
  • go_聊天
  • 人生
  • 技术
  • php
  • 架构
  • 数据库
  • 更多
    • 文件下载
    • 匿名群聊
    • 群聊(进来吹会!)
    • 留言
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册
    • 设置栏目
    • 更多设置
    • 分割线

windows7下搭建Vue.js开发环境完整详细流程步骤

架构  /  管理员 发布于 2020-11-19 18:22:28   222

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 <514224527@qq.com>
? 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...
# ========================
> mytest@1.0.0 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
> mytest@1.0.0 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

看看效果图:

服务

1.png

浏览器

2.png



昵称:

邮箱:

0条评论
最新最热
  • 分类目录
  • 人生 (119)
  • 技术 (46)
  • linux (23)
  • blog从零开始 (9)
  • php (48)
  • 架构 (14)
  • 前端 (22)
  • TP(3/5) (14)
  • 数据库 (29)
  • 微信 (2)
  • Laravel (56)
  • Redis (3)
  • Docker (2)
  • Go (8)
  • 近期文章
  • PHP程序员2021年最新面试题集-持续更新中...(0个评论)
  • PHP数组的底层实现原理浅析(0个评论)
  • php7垃圾回收变量的GC机制详解(0个评论)
  • 在Laravel中进行类型转换详解(0个评论)
  • mysql数据库中事务的四个特征及四种隔离级别的浅析描述(0个评论)
  • Linux awk 命令及统计nginx日志里访问次数最多的前十个IP(0个评论)
  • 论不要在mysql中使用[utf8]编码,如果要用请用[utf8mb4](0个评论)
  • JWT源码实现逻辑详解(0个评论)
  • Laravel内核分析-设计模式之观察者模式(0个评论)
  • Laravel内核分析-设计模式之装饰模式(0个评论)
  • 近期评论
  • 博主 在

    国内用什么翻墙使用谷歌?上外网神器Ghelper插件详解中评论 @请教  小图标没有出现 重复检查步骤5,进去看看右下角是否开启..
  • 请教 在

    国内用什么翻墙使用谷歌?上外网神器Ghelper插件详解中评论 你好,我也遇到了安装完右上角没有显示图标,也不能打开相关网页的问题,用的是谷歌浏..
  • Test11 在

    laravel查询构造器中whereNotKey,whereKey,firstWhere用法详解中评论 <script>alert(\test\)</script&g..
  • 博主 在

    国内用什么翻墙使用谷歌?上外网神器Ghelper插件详解中评论 @西瓜: 每一步都操作完达到效果了吗? 对了是用谷歌浏览器吧..
  • 西瓜 在

    国内用什么翻墙使用谷歌?上外网神器Ghelper插件详解中评论 你好 我安装完右上角没有显示图标,也不能打开相关网页,是怎么回事呢?..
  • 文章归档
  • 2016-10 (34)
  • 2016-11 (21)
  • 2017-06 (5)
  • 2017-07 (11)
  • 2017-08 (6)
  • 2017-09 (7)
  • 2017-10 (11)
  • 2017-11 (4)
  • 2017-12 (3)
  • 2018-01 (9)
  • 2018-02 (2)
  • 2018-03 (2)
  • 2018-04 (1)
  • 2018-05 (3)
  • 2018-06 (1)
  • 2018-10 (1)
  • 2018-11 (1)
  • 2020-03 (5)
  • 2020-04 (85)
  • 2020-05 (42)
  • 2020-06 (35)
  • 2020-07 (22)
  • 2020-08 (11)
  • 2020-09 (14)
  • 2020-10 (7)
  • 2020-11 (8)
  • 2020-12 (6)
  • 2021-01 (6)
  • 2021-02 (6)
  • 2021-03 (2)
Top
  • 友情链接
  • 侯体宗的博客
  • 三防加固笔记本
  • 澜溪博客
  • 心中hope
  • 徒步认知的博客
  • 陈大剩博客
  • 赵波的博客
  • 佘春晓的博客
  • 自动友链系统

Auther ·HouTiZong© 2009-2020 zongscan.com 版权所有ICP证: 粤ICP备20027696号 PHP交流群 也可以扫右边的二维码

侯体宗的博客