当前位置: 首页 > news >正文

后端程序员学习前端开发之第一步环境搭建

一、安装 Node.js

Node.js 是一个开源的、跨平台的 JavaScript 运行时环境。Node.js官网

二、安装 npm 镜像

因为 npm 是国外的,所以使用起来速度比较慢。我们这里使用了淘宝的 cnpm 镜像安装 vue。使用淘宝的 cnpm 命令管理工具代替默认的 npm 管理工具。
进入cmd 输入命令: npm install -g cnpm --registry=https://registry.npm.taobao.org

三、安装全局 vue-cli 脚手架

npm 镜像安装完成之后,接下来安装全局 vue-cli 脚手架。
进入 cmd,输入命令:cnpm install --global vue-cli 然后回车。

以上步骤全部完成后可以使用 vue 命令测试一下,出现如下结果为安装正常

PS E:\IdeaProjects\Reid\前端> vue
Usage: vue <command> [options]Options:-V, --version  output the version number-h, --help     output usage informationCommands:init           generate a new project from a templatelist           list available official templatesbuild          prototype a new projectcreate         (for v3 warning only)help [cmd]     display help for [cmd]

如果执行 vue 命令报错:vue : 无法加载文件C:\Users\xxx\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅  https:/go.microsoft.com/fwlink/?LinkID=135170

解决方法:

1、以管理员身份运行 PowerShell
2、执行:get-ExecutionPolicy,回复 Restricted,表示状态是禁止的
3、执行:set-ExecutionPolicy RemoteSigned
4、选择:Y

四、创建项目

可以使用 vue create 项目名称 或 vue init webpack 项目名称 进行项目创建。

vue create 和 vue init webpack 的区别?
1、vue create:vue -cli3.x 版本的初始方式 ,启动方式默认为 npm run serve
2、vue init webpack : vue -cli2.x 版本的初始化方式,启动方式默认为 npm run dev ,webpack 为官方推荐模板

五、安装项目依赖

可以使用开发工具一键安装或者命令方式进入项目根目录使用命令 cnpm install 安装项目依赖环境即可。

六、运行项目

可以使用开发工具一键启动或者参考第四步按照创建项目方式进行启动即可。

http://www.lryc.cn/news/25449.html

相关文章:

  • 【记录问题】RuntimeError:working outside of application context. Flask使用SQLAlchemy数据库
  • 自动化测试难点案例分析,其实自动化你用错方向还不如不用
  • 866363-70-4,N3-C5-NHS ester,叠氮-C5-NHS 主要物理性质分享
  • 字符流定义及如何深入理解字符流的编码
  • 什么是pod类型
  • 2023年中小企业实施智能制造的建议
  • 【LeetCode】剑指 Offer 19. 正则表达式匹配 p124 -- Java Version
  • linux和windows中安装emqx消息服务器
  • 【XXL-JOB】XXL-JOB的搭建和使用
  • HCIP-5OSPF基本原理及基本配置学习笔记
  • Migrate your data into databend with DataX
  • ssh: Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password)
  • 有限元中三角形的一些积分公式
  • 【docker-compose】安装mongodb
  • 【ClickHouse源码】物化视图的写入过程
  • .NET 使用NLog增强日志输出
  • 一道阿里类的初始化顺序笔试题
  • cuda找不到路径报错
  • Elasticsearch进阶之(核心概念、系统架构、路由计算、倒排索引、分词、Kibana)
  • Android包体积缩减
  • 【华为OD机试】 网上商城优惠活动(C++ Java Javascript Python)
  • GWT安装过程
  • 代码随想录算法训练营第一天| 704. 二分查找、27. 移除元素
  • office@word@ppt启用mathtype组件方法整理
  • 计算机大小端
  • Matplotlib绘图从零入门到实践(含各类用法详解)
  • C语言 入门教程||C语言 指针||C语言 字符串
  • Nacos2.x+Nginx集群配置
  • Android源码分析 - InputManagerService与触摸事件
  • python库--urllib