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

安装Node(脚手架)

目录

  • 一,安装node(脚手架)
    • 1.1, 配置vue.config.js
    • 1.2, vue-cli3x的目录介绍
    • 1.3, package.json
  • 最后

一,安装node(脚手架)

从官网直接下载安装即可,自带npm包管理工具。https://nodejs.org/en

在这里插入图片描述
安装之后在终端里查看查看node版本

node -V

在这里插入图片描述
安装webpack

//  安装webpack 全局安装 在开发环境中
npm install webpack -D -g

安装vue-cli3.x以上

安装vue-cli
npm install @vue/cli@4.5.17 -g
创建工程
vue create 工程名

注意
要先在盘服中创建好文件夹,然后访问
在这里插入图片描述
创建好之后创建工程名字然后选择最后一个,最后一个是自定义项目
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
我就不选择Y了,我选的是N

创建项目成功之后
在这里插入图片描述

1.1, 配置vue.config.js

工程中此文件是没有,需要在工程的根路径下自行创建。

初始化的内容如下:

module.exports = {configureWebpack:{devServer:{port:8090, // 端口open:true, // 自动打开浏览器// Mock数据before(app){}}}
}

1.2, vue-cli3x的目录介绍

vue.config.js里大概包括了配置 常用的输出路径名、跟目录、预处理、devServer配置、pwa、dll、第 三方插件等等
因为绝大部分的配置和扩展尤大大已经做好了封装的了,我们常用的开发基本可以满足,不满足的 我们自己可以自行去扩展
webpack的配置在这个属性里修改configureWebpack(Mock也是在这里面的)

在这里插入图片描述

1.3, package.json

找到这个文件package.json修改一些配置不然运行不成功
在这里插入图片描述
修改成这样
在这里插入图片描述

然后新建终端
在这里插入图片描述
然后输入:npm run serve
在这里插入图片描述
成功之后打开是这个页面
在这里插入图片描述

最后

送大家一句话:现在站在什么地方不重要,重要的是往什么方向移动!!!

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

相关文章:

  • R语言10-R语言中的循环结构
  • 【Spring】一次性打包学透 Spring | 阿Q送书第五期
  • 第 7 章 排序算法(4)(插入排序)
  • JavsScript知识框架
  • el-input添加自定义指令只允许输入中文/英文/数字,兼容输入法事件
  • 0基础学习VR全景平台篇 第89篇:智慧眼-安放热点
  • java中用SXSSFWorkbook把多个list数据和单个实体dto导出到excel如何导出到多个sheet页详细实例?(亲测)
  • SpringBoot 01 如何创建 和pom的解析
  • axios详解
  • Docker分布式仓库
  • SQL注入之万能用户名
  • ubuntu20搭建环境使用的一下指令
  • GAN(生成对抗网络)
  • 实时同步ES技术选型:Mysql+Canal+Adapter+ES+Kibana
  • 禅道后台命令执行漏洞
  • 基于Spark+django的国漫推荐系统--计算机毕业设计项目
  • 向量数据库 Milvus:实现高效向量搜索的技术解析
  • 恒运资本:信创概念再度活跃,华是科技再创新高,南天信息等涨停
  • Synchronized锁升级
  • 记一个宏定义写法
  • 【数据结构】C语言实现栈(详细解读)
  • 3、Spring_容器执行
  • 五、pikachu之RCE
  • 最大不相交区间数量
  • Oracle给表空间添加容量
  • 2023年大数据与区块链国际会议 | EI、Scoups检索
  • 【洛谷算法题】P1000-超级玛丽游戏【入门1顺序结构】
  • ubuntu or kylinos软件安装错误的终极解决方案
  • 30分钟Python自动化从入门到实战(一)
  • FOC之SVPWM学习笔记