Vue脚手架

Vue脚手架

1. 确保npm能用(安装Node.js)

  • Node.js下载地址:https://nodejs.org/zh-cn/download/
  • 安装步骤:直接按照安装向导进行安装。
  • 安装完成后:打开终端,输入npm命令并确保配置环境变量。

2. Vue CLI(脚手架安装)

Vue的脚手架简介

  • Vue CLI:Vue官方提供的标准化开发平台,用于编译.vue代码并生成HTML、CSS、JS代码,同时自动发布到自带服务器。
  • 官网地址:https://cli.vuejs.org/zh
  • 版本要求:Vue CLI 4.x需要Node.js v8.9及以上版本,推荐v10以上。

脚手架安装步骤

1. 配置npm镜像(可选)
  • 镜像配置
    • 豆瓣镜像:npm config set registry http://pypi.douban.com/simple/
    • 清华镜像:npm config set registry https://pypi.tuna.tsinghua.edu.cn/simple
  • 检查配置npm config get registry,返回对应地址表示设置成功。
2. 安装脚手架
  • 安装命令npm install -g @vue/cli
  • 检查版本:安装完成后,输入vue --version,有版本信息表示成功。
3. 创建项目
第一种方式:命令行创建
  • 切换目录cd到目标目录。
  • 创建项目vue create vue_pro,选择Vue 2版本。
  • 配置选项
    • babel:负责ES6语法转换为ES5。
    • eslint:负责语法检查。
  • 项目结构:创建完成后,项目中自带HelloWorld案例。
第二种方式:图形界面创建
  • 运行命令vue ui,访问http://localhost:8000/dashboard
  • 操作步骤
    • 点击左上角“wordvue”选择Vue项目管理器。
    • 创建或打开项目,填写项目名称,选择目录。
    • 配置完成后,自动进入项目并安装依赖。
4. 编译与运行
  • 切换到项目根目录cd vue_pro
  • 启动服务npm run serve,编译HelloWorld案例并启动内置服务器。
  • 访问地址http://localhost:8080
  • 停止服务Ctrl + C

3. 认识脚手架结构

  • 项目结构
    • package.json:包的说明书,包含项目名称、版本、依赖库等信息。
      • serve:启动内置服务器。
      • build:最终编译生成HTML、CSS、JS文件。
      • lint:语法检查。
    • 其他文件:如index.htmlmain.js等。

4. 分析HelloWorld程序

index.html

  • 文件内容
    DOCTYPE html>
    <html lang="">
      <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
        <title>欢迎使用本系统title>
      head>
      <body>
        <noscript>
          <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
        noscript>
        <div id="app">div>
      body>
    html>
    
  • 特点
    • 未手动引入vue.jsmain.js文件,由Vue脚手架自动处理。
    • main.js文件名和位置不应随意更改。

main.js

  • 文件内容
    import Vue from 'vue';
    import App from './App.vue';
    
    Vue.config.productionTip = false;
    
    new Vue({
      render: h => h(App),
    }).$mount('#app');
    
  • 功能
    • 引入Vue和根组件App.vue
    • 关闭生产提示信息。
    • 创建Vue实例并挂载到#app容器。

ES语法检测

  • 问题:单字母组件名会报错,应由多单词组成。
  • 解决方案
    • 修改组件名。
    • vue.config.js中配置lintOnSave: false,关闭保存时语法检查。

5. 脚手架默认配置

  • 配置文件vue.config.js
  • 配置示例
    const { defineConfig } = require('@vue/cli-service');
    
    module.exports = defineConfig({
      transpileDependencies: true,
      lintOnSave: false,
      pages: {
        index: {
          entry: 'src/main.js',
        },
      },
    });
    
  • 功能
    • 配置入口文件。
    • 控制保存时是否进行语法检查。

6. 解释main.js中的render函数

  • 问题:将render函数替换为template会报错,因为Vue脚手架默认引入的是精简版Vue,缺失模板编译器。
  • 原因
    • 精简版Vue文件为dist/vue.runtime.esm.js,体积较小,但不包含模板编译器。
    • 模板编译器在打包时通常不需要,因此被省略。
  • 解决方案
    • 引入完整的Vue文件。
    • 使用render函数替代template
  • render函数完整写法
    import Vue from 'vue';
    import App from './App.vue';
    
    Vue.config.productionTip = false;
    
    new Vue({
      el: '#app',
      render: (h) => h(App),
    });
    

你可能感兴趣的:(Vue.js,vue.js,前端,javascript)