vue初探

桃扇骨 2023-05-31 02:58 93阅读 0赞

### 文章目录 ###

*   *  环境搭建
     *  工具使用
     *  创建Helloworld项目
     *  自己新建页面
     *  页面分析
     *  问题

## 环境搭建 ##

[vue环境搭建][vue]

## 工具使用 ##

[vscode下载][vscode]  
这几个插件可以装一下:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2MDYz_size_16_color_FFFFFF_t_70]

## 创建Helloworld项目 ##

在想创建的目录下打开cmd,执行如下命令,然后一直回车:

vue init webpack vue-demo

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2MDYz_size_16_color_FFFFFF_t_70 1]  
目录结构:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2MDYz_size_16_color_FFFFFF_t_70 2]  
通过工具打开,然后打开终端执行命令:  
1.使用快捷键： ctrl + · 即可；注意那个点是键盘上 esc 下面的那个；

cnpm install;
    cnpm run dev;

访问看见vuelogo基本就没啥问题:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2MDYz_size_16_color_FFFFFF_t_70 3]

## 自己新建页面 ##

以下转自: https://blog.csdn.net/weixin\_43236610/article/details/82866518  
新建个vue文件:First.vue:  
笔者在components目录下新增First.vue文件，内容如下:

<template>
    	  <div><h1>{ { message}}</h1></div>
    	</template>
    	
    	<script>
    	export default { 
    	  name: 'First',
    	  data () { 
    	    return { 
    	      message: 'welcome'
    	    }
    	  }
    	}
    	</script>
    	
    	<style scoped>
    	
    	</style>

然后在router下index.js文件中加上First文件的路由,对着写一遍基本就很清楚:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2MDYz_size_16_color_FFFFFF_t_70 4]  
然后重启一次,访问  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2MDYz_size_16_color_FFFFFF_t_70 5]  
这样简单的已经了解,但是我们还不知道文件的调用关系,重哪开始看呢?仿别人自己将图画了一遍.

## 页面分析 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2MDYz_size_16_color_FFFFFF_t_70 6]

## 问题 ##

问题转自: https://blog.csdn.net/weixin\_43236610/article/details/82866518:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2MDYz_size_16_color_FFFFFF_t_70 7]

[vue]: https://blog.csdn.net/qq_38366063/article/details/102606155
[vscode]: https://code.visualstudio.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2MDYz_size_16_color_FFFFFF_t_70]: /images/20230531/0dd398c5a0c247be866bfddd6ed2bfd2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2MDYz_size_16_color_FFFFFF_t_70 1]: /images/20230531/5d558f4bc4994a7886a37a2c8acd3999.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2MDYz_size_16_color_FFFFFF_t_70 2]: /images/20230531/17cac7affd0d46c7a989f7eafa0416a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2MDYz_size_16_color_FFFFFF_t_70 3]: /images/20230531/c1a18f3f9a00495c96686df86e82473c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2MDYz_size_16_color_FFFFFF_t_70 4]: /images/20230531/ae647ffe6d4a4c95863789cd8987d7c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2MDYz_size_16_color_FFFFFF_t_70 5]: /images/20230531/ccc207921a3b425bb1382cd4ae728987.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2MDYz_size_16_color_FFFFFF_t_70 6]: /images/20230531/1b4afe276c8544d9a17ebdc16fa66437.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2MDYz_size_16_color_FFFFFF_t_70 7]: /images/20230531/535a43d1841144a28cbdba954b14fd86.png