前端之安装并使用Vue脚手架创建新项目

说明

vue脚手架(vue CLI)是vue官方提供的开发平台
vue CLI(command line interface)是向下兼容的, 所以选最新的就好

安装 vue脚手架

1. 换源: 配置npm淘宝镜像

npm config set registry https://registry.npm.taobao.org

2. 全局安装脚手架(第一次才用)

npm install -g @vue/cli

创建新项目

脚手架+hello实例
3. 在需要创建项目的文件夹内, 打开命令行工具, 使用命令创建项目

vue create 项目名

出现 successfully 创建成功

---

• 命名:
  项目名: 小写短横线
  组件一律大驼峰命名法,其余小写短横线.

• 选择使用语言的版本:
  vue2
  vue3
  自定义(手动选择) 可参考链接: 前端之开始学习vue内的初始化一个新项目
  注意:
  babel: ES6 → ES5
  ESlint: 代码规范和错误检查工具

脚手架内部文件说明

也叫项目文件结构

.文件目录
├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件

项目配置文件:

src内:
components 放组件
asset 内部放静态资源
App.vue 管理所有组件
main.js 入口文件:

/**
 * 本文件是整个项目的入口文件
 */

// 引入vue
import {
    
     createApp } from 'vue'
// 引入App组件, 它是所有组件的父组件
import App from './App.vue'

// 创建vue实例对象 -- vm
createApp(App).mount('#app')

命令行执行流程:
npm run serve → main.js → App.vue(包括相关组件) → 将 App放入容器 ( public/index.html )

app.vue 中的 render 函数,

默认文件配置

脚手架依托 webpack(依靠webpack.config.js)

查看配置命令(只是看)

vue inspect > output.js

红色框不可以改

可以改的

官网脚手架配置参考内的属性都是可以改的.
跳转链接
在与package.json同级的位置添加文件vue.config.js

关闭语法检查

  lintOnSave:false//关闭语法检查

其余配置用时查.