windows node.js 安装
最近基础到vue 看到vue-cli 我以前是用vue.js 文件渲染前台的文件
那么vue-cli是干嘛的啊
带着疑问,带着好奇,我看到了一篇博客
https://blog.csdn.net/muzidigbig/article/details/80490884
这篇博客介绍了三种node.js的安装方式
我明白原来node.js 是一种脚本环境
我们直接安装吧
进入node的官网:https://nodejs.org/en/
下载了成之后是一个windows安装包,直接运行
检查node.js是否安装成功:
node -v
安装这个安装包的同时npm也会自动的安装,检查安装情况
npm -v
npm是一种安装的命令,我们可以修改安装下载的镜像
npm install -g cnpm --registry=http://registry.npm.taobao.org
下面可以使用cnpm进行操作安装了
安装vue-cli
cnpm install -g vue-cli
判断vue-cli是否运行成功:
然后判断webpack是否已经安装
中途需要输入yes
重新输入webapck
发现各种都安装好了
通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。
首先我们要选择存放项目的位置,然后再用命令行cd到项目的目录中,在这里,我选择在c盘下创建新的目录(wdgvue目录),用cd 将目录切到该目录下,如下图:
在wdgvue目录下,在命令行中运行命令 vue init webpack firstApp(初始化一个完整版的项目) 。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstApp是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在wdgvue目录生成该文件夹)
vue init webpack
最后生成的项目如下:
项目生成之后要使用:
介绍一下目录及其作用:
build:最终发布的代码的存放位置。
config:配置路径、端口号等一些信息,我们刚开始学习的时候选择默认配置。
node_modules:npm 加载的项目所需要的各种依赖模块。
src:这里是我们开发的主要目录(源码),基本上要做的事情都在这个目录里面,里面包含了几个目录及文件:
assets:放置一些图片,如logo等
components:目录里放的是一个个的组件文件
router/index.js:配置路由的地方
App.vue:项目入口组件(跟组件),我们也可以将组件写这里,而不使用components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染,这里面的<router-view/>必不可少。
main.js :项目的核心文件(整个项目的入口js)引入依赖包、默认页面样式等(项目运行后会在index.html中形成一个app.js文件)。
static:静态资源目录,如图片、字体等。
test:初始测试目录,可删除
.XXXX文件:配置文件。
index.html:html单页面的入口页面,可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。
package.json:项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。
README.md:项目的说明文件。
webpack.config.js:webpack的配置文件,把.vue的文件打包成浏览器能读懂的文件。
.babelrc:是检测es6语法的文件的配置
.getignore:忽略文件的配置(比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置)
.postcssrc.js:前缀的配置
.eslintrc.js:配置eslint语法规则(在这里面的rules属性中配置让哪个语法规则失效)
.eslintignore:忽略eslint对项目某些文件的语法规则的检查
这就是整个项目的目录结构,其中,我们主要在src目录中做修改(模块化开发)。这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装
cd 项目名;进入项目中
安装项目所需要的依赖包/插件(在package.json可查看):执行 cnpm install (npm可能会有警告,这里可以用cnpm代替npm了,运行别人的代码需要先安装依赖)如果创建项目的时候没有报错,这一步可以省略。如果报错了 cd到项目里面运行 cnpm install / npm install
安装完成之后,我们到自己的项目中去看,会多一个node_modules文件夹,这里面就是我们所需要的依赖包资源。
安装完依赖包资源后,我们就可以运行整个项目了。
运行项目
在项目目录中,运行命令 npm run dev (npm run start),会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
最终结果:
windows node.js 安装相关推荐
- windows node.js安装以及启动过程
npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install node-sass cnpm install 启 ...
- Node.js 安装及环境配置之 Windows 篇
一.安装环境 1.本机系统:Windows 10 企业版(64位) 2.Node.js:node-v8.9.4-x64.msi(64位) 二.安装Node.js步骤 1.下载对应自己系统对应的 Nod ...
- Windows之node.js安装
Windows之node.js安装 1.下载node.js, 下载地址:https://nodejs.org/zh-cn/download/ 选择windows安装 2.安装,双击软件图标--接受协议 ...
- Node.js安装及环境配置之Windows篇
一.安装环境 1.本机系统:Windows 10 Pro(64位) 2.Node.js:v12.14.1(64位) 二.安装Node.js步骤 1.下载对应你系统的Node.js版本: https: ...
- 安装软件,python安装,node.js安装,pycharm安装,vscode安装,PR, PS, LR.AE Windows开关机等,雪崩的时候没有一片雪花儿是无辜的
安装 (汉语词语) 安装,汉语词汇,就是按照一定的程序.规格把机械或器材固定在一定的位置上,也指按照一定的方法.规格把机械或器材等固定在一定的地方. 出处 徐迟 <石油头>:"就 ...
- Node.js 安装教程(Windows)
什么是Node.js? 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境: Node.js使用 ...
- Node.js安装-yarm安装及环境配置-Windows篇
一.安装环境 1.电脑系统:Windows 10 (64位) 2.Node.js:v15.5.1(64位) 3.NPM版本:7.3.0 二.安装Node.js步骤 1.Node.js版本下载: htt ...
- Node.js安装教程(Windows)
Node.js安装教程(Windows版本) 安装网址:https://nodejs.org/en/download/ 第一步 选择windows installer: 直接点击windows ins ...
- node.js 安装教程 (Windows zip 版)
node.js 安装教程 (Windows zip 版) 1 官网 地址:Node.js (nodejs.org) 界面: 2 下载 地址:下载 | Node.js (nodejs.org) 自行选择 ...
最新文章
- 使用c3p0对mysql进行增删改查_c3p0连接池连接数据库 并增删改查
- python中的_init_的含义
- Logstash 使用http output处理数据
- canvas绘制阴影
- Java查找一个字符串中所有匹配某正则的子串
- Docker 基本操作
- 转载:Rootkit总结
- 史上最全Java学习资料,共14W字,耗时半年整理
- 弘辽科技:拼多多运营做好竞品分析。
- 黑马JavaEE云计算大数据全套视频 JavaEE云计算开发全套视频教程 超全精华班 82G
- ORA-00932:数据类型不一致:应为NUMBER,但却获得CHAR
- 主页被锁定为 hao.360.cn
- python怎么变成竖行_用python实现古诗词横板竖版显示 【二维列表的使用】
- 第一次使用scrapy爬豆瓣top250 报错 AttributeError Requset has no attribute dont_filter 和 meta
- 动物识别 羊群识别 牛识别 马识别 yolo动物识别 鸟类识别 狗识别 猫狗分类
- 超强古文...... yi
- 俄勒冈大学计算机科学专业,俄勒冈大学计算机与信息科学专业怎么样?高薪热门专业等你来...
- 心理学实验学习pygame编程-贪吃蛇(2)
- 麒麟A1手表升级鸿蒙,HUAWEI WATCH GT2首发体验: 首款麒麟A1的手表有多神?14天续航小意思...
- BetaFlight深入传感设计之九:传感坐标系/机体坐标系/导航坐标系/经纬度坐标系