长沙做手机网站,开源项目网站,怎么用ftp备份网站,网站免费做链接第一部分#xff1a;Node.js
第一步#xff1a;下载Node.js
方法1#xff1a;链接
下载 | Node.js 中文网 (nodejs.cn) 方法2#xff1a;百度网盘
链接#xff1a;https://pan.baidu.com/s/1zIqu8H9rb_I1i-1OWD7swQ?pwdaurk 提取码#xff1a;aurk --来自百度网盘…第一部分Node.js
第一步下载Node.js
方法1链接
下载 | Node.js 中文网 (nodejs.cn) 方法2百度网盘
链接https://pan.baidu.com/s/1zIqu8H9rb_I1i-1OWD7swQ?pwdaurk 提取码aurk --来自百度网盘超级会员V4的分享
作用node.js 是一种javascript的运行环境能够使得javascript能够脱离浏览器运行。以前js只能在浏览器基础上运行能够操作的也知识浏览器比如浏览器上的放大缩小操作前提是浏览器开启的基础上进行操作浏览器是客户端。有了node.js之后js可以在服务端进行操作直接在系统上进行操作可以打开、关闭浏览器等操作。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型使其轻量又高效。 Node.js 的包管理器 npm是全球最大的开源库生态系统。
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境基于Google的V8引擎V8引擎执行Javascript的速度非常快性能非常好
第二步安装Node.js
1点击next (2)点击acceptnext (3)更改路径 4点击next (5)点击next (6)点击install 第三步Node.js配置环境变量
1进入设置搜索“环境变量” 2点击环境变量 3在系统变量里面找到path并双击
然后写入自己的node.js的安装路径 可以看到我的是E:\49nodejs 第四步验证Node.js是否安装配置成功
1进入cmd命令行窗口输入node -v查看nodejs版本
node -v
运行结果
node -v 2输入npm -v查看npm版本
npm -v
运行结果 第五步修改Node.js模块的下载位置
(1)查看npm全局模块的存放路径
npm get prefix
运行结果 2查看npm缓存默认存放路径
npm get cache
运行结果为 3开始自己新建文件夹
在 nodejs 安装目录下创建 “node_global” 和 “node_cache” 两个文件夹 4修改保存路径
设置全局模块的安装路径到 “node_global” 文件夹
注意下面这个引号里面的内容要改成你上面这个文件夹的具体路径
npm config set prefix E:\49nodejs\node_global运行结果为 设置缓存到 “node_cache” 文件夹
npm config set cache E:\49nodejs\node_cache运行结果为
注意由于 node 全局模块大多数都是可以通过命令行访问的还要把【node_global】的路径“E:\devTools\nodejs\node_global”加入到【系统变量 】下的【PATH】 变量中方便直接使用命令行运行如下图所示
测试是否修改成功
经过上面的步骤nodejs下载的模块就会自动下载到我们自定义的目录接下来我们测试一下是否更改成功。输入下面的命令
注意一定要用管理员身份运行cmd
npm install express -g这个g指的是global的意思所以也可以写成
npm install express --global注意“-g”等同于“–global”“-g” 是全局安装不加“-g”就是默认下载到当前目录。“-g” 表示安装到之前设置的【node_global】目录下同时nodejs会自动地在node_global文件夹下创建【node_modules】子文件夹 即自动下载到“E:\devTools\nodejs\node_global\node_modules” 路径下。
包下载成功效果 express模块成功然后在文件管理器中查看是否保存到上面自定义的路径下。
第六步更换镜像
1.修改默认镜像
1查看当前使用的镜像地址
npm config get registry
运行结果为 2将npm默认的registry修改为国内镜像
npm config set registry https://registry.npmmirror.com
运行结果为 再次运行npm config get registry以查看是否修改成功 可以发现已经修改成功了
2.修改全局镜像
说明由于npm的服务器在海外所以访问速度比较慢访问不稳定 cnpm的服务器是由淘宝团队提供服务器在国内cnpm是npm镜像一般会同步更新相差在10分钟所以cnpm在安装一些软件时候会比较有优势。但是cnpm一般只用于模块安装在项目创建与卸载等相关操作时仍使用npm。
npm install -g cnpm --registryhttps://registry.npmmirror.com
注意管理员方式运行
运行结果为 本地查看cnpm模块 执行命令查看cnpm是否安装成功
cnpm -v运行结果为 第二部分安装Vue
第一步安装webpack
作用webpack用来项目构建、打包、资源整合等。
npm install webpack -g注意点以管理员身份运行
运行结果为 第二步安装vue-cli脚手架构建工具
注意这里安装新的脚手架。
npm install -g vue/cli注意点以管理员身份运行
运行结果为 出现warn没关系继续执行即可。
验证来查看vue版本及是否成功
vue -V运行结果为 第三步基于上述Vue创建项目
1新建一个存放项目的路径例如E:\48Visual Studio Code vue\VueCode cmd进入该路径下 2新建项目 vue create vue-demo1这里选择第三个Manually select features自定义选项操作并回车至于第一个和第二个选项可以快速搭建带eslint和babel的项目。
vue create vue-demo8
3选择manually以及四个选项然后点击回车到下一步 4我们选择的版本是2.x,然后回车 5这里选择history模式所以输入Y,然后回车如果使用hash,则输入n。 6代码语法错误检查这里选择ESLint Standard config这个是标准的然后回车。 7选择检查代码语法的时机这里选择第一个Lint on save保存时检查然后回车。 8第三方配置文件存在的方式这里选择第一个In dedicated config files然后回车。 9是否保存本次配置为预设项目模板这里选择N(也可以选择Y这样下次可以直接使用该配置方案快速搭建项目)然后回车等待项目搭建成功。 10项目搭建完成。 11按照提示运行项目
注意要cd后面要换成你自己的这个创建的项目名
cd vue-demo8
然后运行
npm run serve
效果 然后输入http://10.93.226.107:8080/进行访问
http://10.93.226.107:8080/
效果为 第三部分安装Visual studio code
第一步下载
方法1链接
下载Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.https://code.visualstudio.com/ 方法2百度网盘
链接https://pan.baidu.com/s/10VvdIu7vtGaojr9ygg1MAg?pwdxil3 提取码xil3 --来自百度网盘超级会员V4的分享
第二步安装
1点击我同意点击下一步 2更改路径 3点下一步 4选一个path 5安装完成 第三步使用
调节颜色 然后直接点x就行了调完颜色就ok了 打开项目C:\Windows\System32\vue-demo8 打开vscode,注意最好以管理员身份运行 点击打开文件open folder按钮 选择上面我们说的这个文件vue-demo8 点击trust 打开终端: 输入:
npm run serve
运行效果: 进入网页:
好啦!
希望能帮助到大家,祝大家生活愉快!
