vue项目启动步骤

(1). 确保nodejs已经安装

第一步

01-基础-vue-cli 工具-介绍
内置开发时本地服务器，预览代码

1. 统一项目的目录结构
2. 内置开发过程中用到的各种工具

• (1). babel编译
• (2). eslint代码风格约束
• (3). less预处理器

3. 内置开发时本地服务器，预览代码
   • 自动刷新，方便预览
   • 热更新
4. 其它高级功能
   02-基础-vue-cli-安装
5. 安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

命令说明

6. cd mq-project 代表进入文件夹 mq-project

7. npm run serve 代表启动vue项目(启动本地服务器，进行了编译等操作)【运行vue的命令】

安装失败

• 大部分是网络问题 等待
• 切换淘宝源 或者使用yarn安装
• 如果是缓存问题 --(可以使用这两段其中之一)–
  npm cache clean --force
  npm install @vue/cli --force

检查是否安装成功

1. 可以使用这个命令
   vue --version
2. 若安装成功会显示当前版本号
3. 4.4.6 //则可

03-基础-vue-cli-创建项目

第二步

1. 打开gitbash
2. 在终点输入这个命令则可
3. vue create mq-prject
4. 选择创建方式->default ->回车等待安装

04-基础-vue-cli-项目目录解释

 mq-project        # 项目目录
    ├── node_modules # 项目依赖的node包
    ├── public       # 最终打包输出的静态文件目录
    ├── src          # 业务文件夹
    ├── .gitignore   # git提交忽略配置
    └── babel.config.js   # babel配置
    ├── package.json      # 描述项目及项目所依赖的模块信息
    ├── package-lock.json   
    └── README.md   # 项目说明
    
    
{
   
  // 项目注册好的可执行命令 
  // npm run serve -> vue-cli-service serve
  "scripts": {
   
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  // 开发环境和生产环境都需要依赖的包
  "dependencies": {
   
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  // 开发环境所依赖的包
  "devDependencies": {
   
    "@vue/cli-plugin-babel": "^4.4.0",
    "@vue/cli-plugin-eslint": "^4.4.0",
    "@vue/cli-service": "^4.4.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "vue-template-compiler": "^2.6.11"
  }
}

注意：

1. src:里面的文件夹的东西:

- main.js  整个项目的入口文件  不能删除不能修改名称  
- app.vue  整个项目的根组件  其他组件都是它的子孙组件
- components  放置我们组件的地方 名称是自定义的 但是不建议修改
- assets  方式应用的静态资源  图片 icons

05-基础-vue-cli - 理解单文件组件.vue

1.SFC single file component  单文件组件
// 组件的模板  ->  template选项
<template></template>
// 组件的脚本js逻辑   -> 除了template选项之外的其他所有组件项
<script></script>
// 组件的样式
<style></style>

2.vue-loader  转换器  将.vue文件转换成vue组件的配置项
  .vue -> 
  {
   
    components:{