安装Node(脚手架)

一,安装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
在这里插入图片描述
成功之后打开是这个页面
在这里插入图片描述

最后

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

  • 21
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 20
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 20
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值