Vue脚手架

脚手架

安装步骤

  1. 全局安装@vue/cli

    • npm install -g @vue/cli

    • 安装之后使用不了vue的命令,查看nodejs文件发现我把vue装在了node_globalnpm这个文件夹中。

      解决方法:新增一条path指向该文件夹

  2. 切换到你要创建的目录创建脚手架

    • vue create 项目名称
  3. 根据提示cd vue_test, npm run serve

  4. 完成安装

    • 本机访问Local: http://localhost:8080/
    • 同局域网访问Network: http://192.168.1.101:8080/

脚手架结构

配置文件

Vue脚手架_第1张图片

  • .gitignore
    • git的忽略文件
  • babel.config.js
    • babel配置文件
    • ES6==>ES5
  • package-lock.json package.json
    • 包的说明书
  • README.md
    • 项目描述

src

Vue脚手架_第2张图片

  • main.js

    • 执行完npm run serve之后直接执行这个文件
    • 该文件是整个项目的入口文件
  • App.vue

  • app.vue

    
    
    
    
    
    
  • assets

    • 存放静态资源(图片,视频…)
  • components

    • 组件都放在这里

public

在这里插入图片描述

网站图标和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><%= htmlWebpackPlugin.options.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>

main.js

import Vue from 'vue'	//引入Vue
import App from './App.vue'

//阻止默认行为
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')   //相当于el:'#App'

为什么要使用render函数

这里import引入的vue是残缺版的,没有模板解析器(template解析器)

解决办法

  • 引入完整版
  • 使用render函数

render函数

render是个函数,Vue会调用render函数,这个函数可以创建具体的元素。

render(createElement){

return createElement(‘h1’,‘你好’)

}

//简写成箭头函数

render:createElement=>createElement(app)

为什么不直接引入完整版vue

vue由两个东西组成,一个是vue核心还有一个是模板解析器

vue完整版中模板解析器的代码占用了差不多三分之一

最终进行打包的时候模板解析器不用进行打包

为了打包的时候节省点空间所以使用残缺版的vue(缺少模板解析器)

使用render函数就相当于:

买瓷砖(Vue核心)+雇工人(模板解析器)===>铺好的瓷砖

使用完整版vue相当于:

买瓷砖(Vue核心)+买工人(模板解析器)===>铺好的瓷砖+工人

修改默认配置(vue.config.js)

Vue脚手架隐藏了所有webpack相关配置,如果想要查看webpack配置(该文件不可修改),就要执行

vue inspect > output.js

如果要修改配置文件那么在vue.config.js中进行修改直接将要修改的内容写入该文件之后该文件会将修改的内容与被隐藏起来的原内容进行比较,更改被隐藏的文件中的内容。(vue不允许直接触碰被隐藏的核心文件)

module.exports={
    //修改入口文件配置项
    pages:{
        index:{
            //入口文件
            entry:'src/main.js'
        }
    },
    //关闭语法检查配置项
    lintOnSave:false
}

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