Vue.js note8（脚手架：项目环境配置&单文件组件）

1、基本的环境搭建

（一）项目环境配置

（1）安装 node.js，下载地址：https://nodejs.org/en/download/

前端常常借助node实现工程化。虽然vue不是基于nodejs的，但nodejs可以使vue的开发更加简单。

链接文档1：基于node的vue开发环境搭建
链接文档2：vue是基于nodejs吗？

（2）安装脚手架最新版本
我的博客：仅仅是 安装vue脚手架&配置端口、热更新等

注意：一个电脑上只能有一个脚手架 ，我们现在要用的是4.0up版本，不过可以了解一下2.0 。

（二）vue-cli 2.0 项目环境配置—了解一下

1、项目环境配置（2.0）

• 安装 vue-cli：npm install vue-cli -g（可以自动的构建项目结构和项目目录）

• 安装webpack：npm install webpack -g

• cd 到指定的项目路径中 并且初始化文件夹 npm init

• 创建项目：vue init webpack 项目名

• 切换到所创建的项目目录下：cd 你创建的项目文件夹

• 启动项目：npm run dev

2、项目目录结构分析（2.0），文件解释

• build 中配置了webpack的基本配置，开发环境配置、生产环境配置（不建议修改）

• config中配置了路径端口值等

• node_modules为依赖的模块

• src放置组件和入口文件

• static放置静态资源文件

• index.html文件入口

3、卸载脚手架
如果已经全局安装了旧版本的vue-cli(1.x 或 2.x)，需要卸载：npm uninstall vue-cli -g

官方：

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

（三）最新的脚手架CLI ， vue-cli @4 ， 最新CLI环境搭建

10月16日，官方发布消息称Vue-cli 4.0正式版发布，安装和vue-cli3.0的是一模一样的，与3.0的脚手架，除了目录发生变化一些，其他的都一样。
而且由于近期才推出，企业中还在使用3.0，但是4.0使用方式与3.0相同。

1、vue-cli @4安装，并创建项目 ：

npm install -g @vue/cli  
vue --version    			// 查看版本
vue create  项目名

2、项目运行：

cd 项目名
npm run serve

默认初始页：http://127.0.0.1:8080 或者 localhost:8080

（四）2.x、4.x 目录文件的差异

4.x            2.x

（五）扩展

<1> package.json里面可以修改命令的相关配置。

<2> vue-cli 配置端口 自动开启 热更新
在项目的根路径下创建一个文件名为vue.config.js（不能改）。

2、脚手架—课堂笔记

（一）什么是脚手架

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板，是为现代前端工作流提供了 batteries-included

虽然现在vue-cli更新到了4.0以上的版本，但用法跟3.0相差不大，所以，这篇文章还是很有参考价值的：vue-cli3.x（简书）

（二）脚手架的作用

帮助我们搭建框架，我们只需要写逻辑就好。

（三）脚手架的文件目录介绍

src：写代码的地方
public：存外部资源

App.vue 全局根组件：
删除默认组件components文件夹下的Helloworld.vue，然后在App.vue文件里把跟helloworld有关的都删掉。

下载一个插件Vetur ，让VScode接收以点.vue结尾的文件，而以点.vue结尾的文件，就是单文件组件

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统：Vue.js 开发标准化工具 Vue CLI

3、单文件组件的使用

单文件组件是以点.vue结尾的文件，用来封装组件。

谨记：一个文件，一个组件。

如果你发现你的编辑器不能提示单词，可以下载 Vue 3 Snippets 插件，就会有单词提示功能了。

.vue文件里面有3个主要部分：template标签、 script标签、 style标签。

然后注意，在style开标签里一定写上scoped，因为加上的话，意味着当前样式只对当前组件生效。

组件被引用的顺序：引用—>调用—>使用。

---

（一）单文件组件

通过一个.vue为后缀的文件来完成一个组件的封装。

（二）单文件组件的定义

模板在单文件组件中的书写方式：

js在单文件组件中的书写方式export default：

css在单文件组件中的书写方式：

练习一个小栗子： 自己写一个模板，功能是打印一串字符（刚开始，怎么简单怎么来，先弄清方法），然后导入到跟App.vue 全局根组件中使用。

1、在与App.vue同级的存放components的文件下，新建./components/demoSky.vue，

//demoSky.vue
<template>
    <div>
        我是demoSky组件里的文本内容<br>
        {{text}}
    </div>
</template>

<script>
// 这本来就是一个文本一个组件嘛，所以文件命名就是组件的名字，不用再写一遍了
// 直接可以写组件里面的属性
export default {
    data() {
        return {
            text:"我也是,不过我是模型数据变量，我叫text",
        }
    },
    methods: {
        
    },
}
</script>

<style scoped>
    /* scoped  当前样式只对当前组件生效 */    
</style>

2、然后在App.vue文件里面，引用，调用，使用上面定义的组件 demoSky.vue。

//App.vue
<template>
  <div id="app">
    <!--3、最后使用-->
    <demoSky/>

  </div>
</template>

<script>
// 先引入，再调用，最后使用
import demoSky from './components/demoSky.vue'//1、引入
export default {
  name: 'App',
  components: {
    demoSky //2、调用
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

然后开启服务，查看是否运行成功。

（三）改变主页名字

然后，打开与App.vue目录同级的main.js文件，原始文件如下：

修改文件，导入不同的模板文件，修改下面的相关代码，让App copy.vue替代App.vue：

...
import App133 from './App copy.vue' //导入，命名App133
...
new Vue({
  render: h => h(App133),
}).$mount('#app')

具体不知道怎么回事，反正打开页面确实换了。

（四）v-for key的使用

vue组件化应用中，为遍历数组或元素中的唯一标识，增加或删减元素时，通过这个唯一标识key判断是否是之前的元素，vue会直接对已有的标签进行复用，不会整个的将所有的标签全部重新删除和创建；只会重新渲染数据，然后再创建新的元素直到数据渲染完为止。

比如下面，v-bind:key=“index”，这个index在前面v-for里代表索引号：

<li v-for="(item,index) in arr" :key="index"></li>

链接CSDN博客：vue for循环报错Elements in iteration expect to have ‘v-bind:key’ directives

---

其他东西放在下一篇了。