windows7下搭建Vue.js开发环境完整详细流程步骤
框架(架构)  /  管理员 发布于 4年前   1651
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
看看效果图:
服务
浏览器
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号