[JavaScript知识库]vue 初始搭建 脚手架-创建项目-启动服务

?首先确保 全局安装 @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   //自定义的端口号
  }
}