vue CLI_1、初始化脚手架

1、初始化脚手架

1.1、说明

vue-cli是Vue官方提供的脚手架工具。
cli：command line interface命令行接口工具。
Vue脚手架是Vue官方提供的标准化开发工具（开发平台）
最新的版本是4.X
文档：https://cli.vuejs.org/zh/

1.2、安装vue-cli

如果下载缓慢请配置 npm的下载路径为淘宝镜像 npm config set registry https://registry.npm.taobao.org

1 .全局安装(（仅第一次执行) 全局安装@vue/cli：
npm install -g @vue/cli

1.3、创建脚手架的项目

1、切换到创建项目的目录下，使用命令创建项目vue create xxxx
如：vue create vue_test

2 .选择使用vue的版本，然后回车等待其创建即可。

其它命令：

启动项目 npm run serve
打包项目 npm run build
暂停项目Ctrl+C

Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpack配置，请执行
vue inspect > output.js

1.4、脚手架(vue)项目的文件结构

默认不是自动打开浏览器，可以设置成自动打开

源码目录，主要在这里面写代码

主页

public文件夹就相当于脚手架开启的8080端口服务器的根目录

脚手架文件结构

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

在vue项目里新建下面几个文件

src\components\SchoolAce.vue

<template>
<!-- 组件的结构  -->
<div class="demo">
    <h2>学校名称：{{name}}</h2>
    <h2>地址：{{address}}</h2>
    <button @click="showName">点我提示信息</button>
</div>

</template>

<script>
//组件交换相关的代码(数据、方法等)

    export default {
        name:"SchoolAce",
        data(){
            return{
                name:"家里蹲大学",
                address:"某国"
            }
        },
        methods:{
            showName(){
                alert(this.name);
            }
        }
    };

</script>

<style>
/* 组件的样式 */
.demo{
    background-color: aqua;
}

</style>

script里也可以这样写：不过没必要在子组件里再引用Vue

src\App.vue

<template>
  <div>
      <img src="./assets/logo.png" alt="555">
      <SchoolAce></SchoolAce>
      <StudentAce></StudentAce>
  </div>
</template>

<script>

    //引入组件
    import SchoolAce from "./components/SchoolAce.vue";
    import StudentAce from "./components/StudentAce.vue";
    export default {
        name:"App",
        components:{
            SchoolAce,
            StudentAce
        }
    }
</script>

src\main.js


//该文件 是整个项目的入口文件

//引入Vue 
import Vue from 'vue'
//引入 app组件，它是所有组件的父组件
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vue实例对象vm
new Vue({
  //将app组件放入容器中
  render: h => h(App),
}).$mount('#app')

public\index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 下面这行代码是针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面-->
    <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>
    <!--当浏览器不支持js时，noscript中的元素就会被渲染-->
    <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>
    <!-- built files will be auto injected -->
  </body>
</html>

在根目录打开终端启动脚手架：用启动的地址进行访问：

1.5、render函数

1.6、关于脚手架里的Vue包里的不同版本的Vue：

vue.js与vue.runtime.xxx.js的区别：
(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
render函数接收到的createElement函数去指定具体内容。

1.7、vue.config.js配置文件

使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
使用vue.config.js文件可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

如：

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
    },
  },
  //关闭语法检查
  lintOnSave:false,
}

posted @ 2022-04-07 19:44 青仙阅读(122) 评论(0) 编辑收藏举报

刷新页面返回顶部

青仙