vue创建工程

(一)在vue搭建之前一定先要安装node.js,因为vue的运行是要依赖于node的npm管理工具来实现的,我下载的都是最新版本,地址:https://nodejs.org/zh-cn/download/

查看node和npm是否安装成功:node -v 和 npm -v

在这里插入图片描述
(二)由于在国内使用npm速度会很慢,所以推荐使用淘宝镜像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
在这里插入图片描述
(三)使用淘宝镜像全局安装vue-cli脚手架,cnpm install --global @vue/cli,这里注意一下vue3.0之前的版本是cnpm install --global vue-cli,有一点点不同。进度条加载完后,确认一下vue是否安装成功vue -V (这里是大V哦)
在这里插入图片描述
(四)vue脚手架搭建完之后,开始搭建一个vue项目,我选择把项目放在F盘,创建一个名为chat_room的项目:
vue create chat_room
 在这里插入图片描述
然后 会让我们选择一个默认模式和手动模式,默认模式不需要做过多的配置,一路回车就OK!我,选择了手动模式,接下来选择配置选项,使用 空格键 进行选择与取消,Ctrl+a是全选中,自行根据需要选择,然后回车。
在这里插入图片描述

(五)之后选择路由模式是history模式还是哈希模式,选择哈希模式 n,回车;之后选择ESlint,选择标准模式:ESLint + Standard config

(六)然后选对样式的检查,是在保存的时候还是commit时候,选保存时Lint on save

(七)然后选择对这样配置,放置在单独的配置文件中配置,还是集成到package.json中,如果最初选择了默认模式,那么这个选项就会是package.json,我在这里选的是单独配置。
在这里插入图片描述
(八)接下来是否把刚刚配置的这些作为以后创建的项目的默认配置,默认为N,不是
在这里插入图片描述

(九)然后进入到cd这个项目目录:npm run serve,打开浏览器,发现项目创建成功了
在这里插入图片描述
(十)打开项目,根目录下创建项目配置文件vue.config.js,这些是为了找到以后所写的css,js等资源文件的路径

vue.config.js的文件内容如下:
在这里插入图片描述
module.exports = {
publicPath: process.env.NODE_ENV === ‘production’
? ‘./’
: ‘/’
}
注意:如果你是vue3.3之前,或许试试将上边代码中的publicPath换成baseUrl

(十一)这样一个名为first-vue的vue项目就创建好了,在根目录下执行npm run build 将项目进行打包生成dist文件夹,打开里面的index.html文件就看到我的项目啦。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值