首先确保 全局安装 @Vue/cli
yarn global add @vue/cli 和 npm install -g @vue/cli 任选其中一种命名 全局安装
可用 vue -V 查看是否安装 以及安装的版本
1.创建项目
# vue和create是命令, vuecli-demo是自己的文件夹名
# vue和create是命令, vuecli-demo是自己的文件夹名
vue create vuecli-demo
2,然后选择vue的版本
可以上下箭头选择, 回车确定, 弄错了ctrl+c从第1步来==
3. 然后在cmd中执行 图片上的两条命令 切换脚手架项目下, 启动内置的==webpack热更新开发服务器==
4.出现绿色,显示如下代码代表启动成功
5.在浏览器中 - 输入上述地址
以上完成了脚手架-创建项目-启动服务
下面是简单介绍
目录分析
vuecil-demo # 项目目录
├── node_modules # 项目依赖的第三方包
├── public # 静态文件目录
├── favicon.ico# 浏览器小图标
└── index.html # 单页面的html文件(网页浏览的是它)
├── src # 业务文件夹
├── assets # 静态资源
└── logo.png # vue的logo图片
├── components # 组件目录
└── HelloWorld.vue # 欢迎页面vue代码文件
├── App.vue # 整个应用的根组件
└── main.js # 入口js文件
├── .gitignore # git提交忽略配置
├── babel.config.js # babel配置
├── package.json # 依赖包列表
├── README.md # 项目说明
└── yarn.lock # 项目包版本锁定和缓存地址
主要文件及含义
node_modules – 第三方依赖包
public/index.html – 浏览器运行的网页
src/main.js – webpack打包的入口文件
src/App.vue – Vue入口页面
package.json – 依赖包列表文件和自定义命令
脚手架-自定义配置
脚手架内置的webpack, 如何修改配置
配置文件叫vue.config.js
src并列处, 新建vue.config.js
/* 覆盖webpack的配置 */
module.exports = {
devServer: { // 自定义服务配置
open: true, // 自动打开浏览器
port: 3000 //自定义的端口号
}
}