vue2笔记5 脚手架

vue-cli

命令行接口

安装

npm i -g @vue/cli

创建项目

vue create my-app

命令

  • 启动开发环境

npm run serve

  • 构建

npm run build

项目结构

  • 首页页面
    ./public/index.html
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 让IE浏览器以最高渲染级别渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- BASE_URL指代public目录所在路径 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- webpack插件从package.json取name属性填入 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
  	<!-- 浏览器不支持js时,渲染此段 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- Vue容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
  • 入口文件
    ./src/main.js
// 引入Vue,此vue为运行时版本
import Vue from 'vue'
// 引入根组件
import App from './App.vue'

Vue.config.productionTip = false
// 创建并挂载实例
new Vue({
  // 不能使用template 不写此行会报错,除非引入完整版vue
  render: h => h(App),
}).$mount('#app')

注:使用import from 'vue’导入的模块时运行时版本vue,不包含模板解析器
render函数收到参数h为createElement函数,通过函数创建内容
在这里插入图片描述

  • 静态文件目录
    ./src/asserts/
  • 根组件
    ./src/App.vue
  • 组件目录
    ./src/components

查看隐藏的webpack配置文件

vue inspect > output.js

自定义配置文件

根目录创建vue.config.js
脚手架配置文档

module.exports = {
    // 关闭保存时语法检查
    lintOnSave: false
}

posted on   路过君  阅读(5)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
历史上的今天:
2020-04-11 spring 启动时自动运行
2020-04-11 spring cloud oauth2授权服务 默认tokenService配置源码
2020-04-11 spring cloud 搭建oauth2授权服务 使用redis存储令牌
2020-04-11 spring cloud oauth2授权服务 clientDetails配置源码
2020-04-11 spring 验证框架
2020-04-11 IDEA 插件整理
2020-04-11 spring security笔记 默认登陆页面源码

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示