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 2022-04-11 22:37  路过君  阅读(3)  评论(0)  编辑  收藏  举报

导航