vue-vue脚手架

第六章 实际开发使用的Vue脚手架

1. 初始化创建Vue脚手架

简介：详解初始化创建Vue脚手架

• 定义

  • Vue脚手架是官方提供的标准化开发工具（最新4.x版本）
  • 网址：https://cli.vuejs.org/zh/guide/

• 起步

  • 使用淘宝镜像源安装

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    

  • 全局安装Vue CLI（仅第一次安装需要执行）

    cnpm install -g @vue/cli
    

  • 进入到要创建项目的文件夹

    vue create xxx
    

    • 回车后进行的配置
      1. Default([Vue 2] babel, eslint)

  • 启动项目

    npm run serve
    

2. 分析Vue脚手架结构信息

简介：详解Vue脚手架结构信息

• node_modules
  • 项目的安装依赖
• public
  • 放置静态资源文件
    1. 图标
    2. index.html 文件
• src
  • 项目的主入口文件夹
  • APP.vue 项目入口文件
• .gitignore
  • git版本管制的忽略的配置
• babel.config.js
  • ES6语法编译成ES5语法
• package-lock.json
  • 记录了当前项目所有模块的具体来源和版本号以及其他的信息
• package.json
  • 记录当前项目所依赖模块的版本信息
• README.md
  • 项目说明文件
• npm run serve 项目运行
• npm run build 项目打包
• npm run lint 项目校验

3. 详解vue初始项目文件

简介：详解vue初始项目文件

• vue初始项目文件

  • 执行启动命令后的文件执行
  • main.js
    • 整个项目的入口文件
    • 当前引入的是运行版的vue，没有模板解析器，所以是用的是render函数

  // main.js
  import Vue from 'vue'	// 在安装vue-cli 时进行了安装    引入的是运行版的vue
  import App from './APP.vue'  // 所有组件的父组件
  
  Vue.config.productionTip = false	// 关闭生产提示（阻止启动生产消息）
  
  //方式1
  new Vue({	// 实例化vue的构造函数
      render: h=>(App),
  }).$mount('#app')
  //方式2
  new Vue({	// 实例化vue的构造函数
      el: ' #app',
      // render: h=>(App),  // 下面的简写形式
      // 等同于
      render(createElement){
          return createElement(App);
      }
  })
  

  • App.vue
    • 所有子组件的父组件

​

• public/index.html
  • <%= BASE_URL %>favicon.ico 表示当前路径下的ico文件 === ./favicon.ico

4. 详解Vue的配置文件修改

简介：详解Vue的配置文件修改

• 配置文件

  • 查看vue脚手架的默认配置（修改不奏效）

    vue inspect > output.js
    

  • 对脚手架进行设置

    • 在根目录新建 vue.config.js 文件设置

• 修改入口文件main.js 传送门

// vue.config.js
将上述代码拷贝下来
module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/wztmain.js',   // 入口文件重命名
    }
  }
    lintOnSave: false, // 关闭校验
}