Vue脚手架①

文章目录

创建Vue脚手架

Vue脚手架又称​​Vue CLI​​

官方网址https://cli.vuejs.org/zh/

• 第一步（仅第一次执行）：全局安装@vue/cli。
  ​​npm install -g @vue/cli​​
• 第二步：切换到你要创建项目的目录，然后使用命令创建项目
  ​​vue create xxxx​​

xxxx处编辑你的项目名称

• 第三步：启动项目
  ​​npm run serve​​
• 如要停止项目使用ctrl + c

第一次启用Vue脚手架已经自动为你写好了一个helloworld项目

如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry https://registry.npm.taobao.org

分析Vue脚手架的结构

├── 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：包版本控制文件

只要你打开的工程符合npm规范，那么一定有package.json这个文件(也就是包的说明书)。这里面会配置包的名字、什么版本、采用的依赖等等 如图就是配置了一些命令：

我们再命令行输入npm run serve，其实就是第一条那个命令。这个命令是在开发过程中使用时可以让别人帮我们配置好服务器以及一些必要文件。

​

​​build​​

​：是在代码写完了功能开发完了的情况下，想把整个工程变成浏览器可以认识的东西。

​

​​lint​​

​:（几乎不用）将整个代码里面写过的js和.vue文件进行一次语法检查。

这个紧随其后的package-lock.json是一个包版本配置文件，他有什么作用呢？我们可以举一个例子：

我们可以看到这个包叫compat-data，他的版本、下载地址等信息都在下面记录着。记录他们的作用就是：如果我们以后还要安装的时候能保证最快的速度给我们安装到指定版本。如果没有这个lock文件，我们的版本可能就锁不住了，就这个包来说我们下次下载下来的可能就是8.xxxx版本的了。

README.md文件是对整个工程进行一个说明。

node_modules里面放着脚手架中涉及的所有第三方库

然后我们再看src文件夹里的东西：

其中main.js非常重要，在我们执行​​npm run serve​​命令之后，直接就会执行main.js(所以它也被称为入口文件)。

我们可以试一下，将main.js中的代码注掉：

运行工程：

上面那一行的意思是等待更新的信号，这是脚手架的一个高级功能。也就是我们将代码修改之后重新保存，脚手架会帮我们重新编译。

assets文件夹我们经常可以在前端项目中看到。这个文件夹里面一般放静态资源。

静态资源和动态资源的概念：
​​​静态资源​​​：我的理解是前端的固定页面，这里面包含HTML、CSS、JS、图片等等，不需要查数据库也不需要程序处理，直接就能够显示的页面。
具体形式为：客户端发送请求到web服务器，web服务器拿到对应的文件，返回给客户端，客户端解析并渲染出来。
​​​动态资源​​​：需要程序处理或者从数据库中读数据，能根据不同的条件在页面显示不同的数据，优点是内容更新不需要修改页面，缺点是访问速度不及静态页面。
具体形式为：客户端请求的动态资源，先把请求交给web的一个存储点，web存储点连接数据库，数据库处理数据之后，将数据交给web服务器，web服务器返回给客户端解析渲染处理。

components文件夹里放着所有的组件(除了App.vue)

Vue脚手架初使用

我们将上一节中的代码运行到脚手架上：
注意：

• main.js文件不更换
• index.html文件不更换
• 将脚手架中的hello组件删除，替换成自己的
• 组件的引入地址是否正确

index.html文件注解：

为什么页签图标的引入地址要写成<link rel=“icon” href=“<%= BASE_URL %>favicon.ico”>？
写成<link rel=“icon” href=“./favicon.ico”>不行吗？
这样写是因为当项目开发完了部署到服务器上的时候，容易产生各种各样的路径问题。所以Vue脚手架为了优化这一个问题就建议不使用​​​./​​​ ​​../​​​这些符号，而是使用​​<%= BASE_URL %>​​​去替代​​./​​ （在底层有相应的的处理逻辑）

配置网页标题<title><%= htmlWebpackPlugin.options.title %></title>这样写的功能：就是到package.json文件中去找到name：

把这个name去当做网页的标题

(htmlWebpackPlugin.options.title是webpack的一个插件完成得功能)

<noscript>
<strong>We’re sorry but <%= htmlWebpackPlugin.options.title %> doesn’t work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
这表示这个浏览器如果不支持js那么strong标签中的文字会出现在页面上

两个小问题：
为什么main.js就是入口文件？
为什么main.js这个文件都没有在index.html中引入，它却能找到对应的容器？
这两个问题都有相同的答案：Vue脚手架为我们配置好了的。

初次使用Vue脚手架时遇到的几个问题

问题一

在高版本的Vue脚手架中，组件的name属性要使用双驼峰表示法或者​​-​​表示法

例如：
MySchool 或者 my - school

问题二

有关组件的暴露方式：

如果你使用的是export default搭配Vue.extend的简写方式，这种最方便、也最不容易出错：

<template>
        <div>
            <h2>学校名称:{{SchoolName}}</h2>
            <h2>学校地址:{{SchoolAddress}}</h2>
            <hr>            
        </div>
</template>

<script>export default {
        name:'DongBei',
        data(){
            return {
                SchoolName:'NEFU',
                SchoolAddress:'哈尔滨',
            }
        },
    }</script>

<style>

</style>

但如果你使用的是export default搭配Vue.extend的一般写法，那么你暴露的时候要将组件里面的配置项一个个的全暴露出来，并且还要一个个地去引入Vue：

<template>
        <div>
            <h2>学校名称:{{SchoolName}}</h2>
            <h2>学校地址:{{SchoolAddress}}</h2>
            <hr>            
        </div>
</template>

<script>import Vue from 'vue'
    const SchoolName = Vue.extend({
        name:'DongBei',
        data(){
            return {
                SchoolName:'NEFU',
                SchoolAddress:'哈尔滨',
            }
        },
    })
    export default {
        SchoolName,
        data(){
            return {
                SchoolName:'NEFU',
                SchoolAddress:'哈尔滨',
            }
        },
        name:'DongBei'
    }</script>

<style>

</style>