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

布满荆棘的人生 2023-02-28 04:30 64阅读 0赞

### 1、基本的环境搭建 ###

##### （一）项目环境配置 #####

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

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

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

（2）安装脚手架最新版本  
我的博客：[仅仅是 安装vue脚手架&配置端口、热更新等][_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  项目名

![在这里插入图片描述][2020072014511661.png]  
![在这里插入图片描述][2020072014512514.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][202007201451480.png]  
![在这里插入图片描述][20200720145215571.png]  
![在这里插入图片描述][20200720145221330.png]  
![在这里插入图片描述][20200720145228516.png]  
![在这里插入图片描述][20200720145234357.png]  
![在这里插入图片描述][20200720145238865.png]

**2、项目运行**：

cd 项目名
    npm run serve

默认初始页：http://127.0.0.1:8080 或者 localhost:8080  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]

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

4.x            2.x  
![在这里插入图片描述][20200720145417570.png] ![在这里插入图片描述][20200720145457247.png]

##### （五）扩展 #####

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

<2> **vue-cli 配置端口 自动开启 热更新**  
在项目的**根路径下**创建一个文件名为vue.config.js（不能改）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]

### 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][Vue.js _ Vue CLI]

### 3、单文件组件的使用 ###

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

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

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

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

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

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

--------------------

###### （一）单文件组件 ######

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

###### （二）单文件组件的定义 ######

模板在单文件组件中的书写方式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]  
js在单文件组件中的书写方式export default：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 4]  
css在单文件组件中的书写方式：  
![在这里插入图片描述][2020072014574055.png]

**练习一个小栗子：** 自己写一个模板，功能是打印一串字符（刚开始，怎么简单怎么来，先弄清方法），然后导入到跟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">
        
        <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>

然后开启服务，查看是否运行成功。  
![在这里插入图片描述][20200720175857260.png]

###### （三）改变主页名字 ######

然后，打开与App.vue目录同级的main.js文件，原始文件如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 5]  
修改文件，导入不同的模板文件，修改下面的相关代码，让App copy.vue替代App.vue：

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

具体不知道怎么回事，反正打开页面确实换了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 6]

###### （四）v-for key的使用 ######

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

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

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

--------------------

其他东西放在下一篇了。

[node_vue]: https://www.jianshu.com/p/cc4979ee8ef1
[vue_nodejs]: https://m.html.cn/qa/node-js/12217.html
[_vue]: https://blog.csdn.net/weixin_43297321/article/details/107465114
[2020072014511661.png]: /images/20230209/6c0f8e82de5d412086d9842dcd203bb9.png
[2020072014512514.png]: /images/20230209/11c992bd53ac46d79ee415bae1aeaf45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: /images/20230209/cb3f397f9e374478b22909e6ddc3c0ee.png
[202007201451480.png]: /images/20230209/c490277870414156833946461058118e.png
[20200720145215571.png]: /images/20230209/614e16ff2b904a388f3c2970fa2a639a.png
[20200720145221330.png]: /images/20230209/76fd684253fb465895211a9bc47ab852.png
[20200720145228516.png]: /images/20230209/201db4687ba74a85a423eef4309005d1.png
[20200720145234357.png]: /images/20230209/d83453cea95c46cabace6d713c98bddd.png
[20200720145238865.png]: /images/20230209/7d8d2bb0effb4e5399d0b62dd5cf6f3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]: /images/20230209/19b1614962ac4091b595e3b7ff4d17f1.png
[20200720145417570.png]: https://img-blog.csdnimg.cn/20200720145417570.png
[20200720145457247.png]: /images/20230209/6f2393047a734c31acc860fd89f730fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]: /images/20230209/881fea8ea4f443c18f94fc52c6cac99b.png
[vue-cli3.x]: https://www.jianshu.com/p/06a9f112867d
[Vue.js _ Vue CLI]: https://www.oschina.net/p/vue-cli?hmsr=aladdin1e1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]: /images/20230209/d8ce701a9ef9494fbbc9777cbc02aa14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 4]: /images/20230209/77b843df0fe543b1a85e6a9c77be4691.png
[2020072014574055.png]: /images/20230209/5070d1677f3a42418684bb30ab70feb2.png
[20200720175857260.png]: /images/20230209/a1b9d6b07a674165a6bb44ebd63edb04.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 5]: /images/20230209/72247794138d46a8b50bb8f828b6e096.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 6]: /images/20230209/8771a06abd8c4b09b46d65d42636000d.png
[vue for_Elements in iteration expect to have _v-bind_key_ directives]: https://blog.csdn.net/Hero_rong/article/details/88776855