【Vue系列】Vue-cli（Vue脚手架）详细教程

1. 创建Vue脚手架

1.1 首先系统需要全局安装Vue脚手架

npm install -g @vue/cli

1.2 创建Vue脚手架工程

进入你想创建vue脚手架的目录，然后输入命令

vue create xxx项目名

需要注意的是工程名字不能大写，这里我们选择选择Vue2，敲下回车，那么vue将会为我们创建vue脚手架

 显示如图所示说明创建成功

如图命令所示 我们进入myvue工程，执行命令
npm run serve
然后浏览器访问http://localhost:8080/

 到这里 我们的vue脚手架工程就跑起来了，关闭为Ctrl+C

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

    

     

    
    

     

      ├── vue.
      config.js: 是一个可选的配置文件
     
    
  
 

  
 

3. 修改默认配置

Vue-cli官网配置参考:https://cli.vuejs.org/zh/config/#publicpath

在工程根目录下创建文件vue.config.js

 这里我们演示配置一下语法检查

3.1 配置前

会发现，默认语法检查是开启的，然后我们写了一个function没有被使用的话就会导致整个项目启动不了，所以在实际开发中，会带来很多障碍，所以我们将它关闭。

3.2 配置后

在vue.config.js中，加入以下代码

4. render函数

在入口文件main.js中，render函数

为什么用render，而不用template ``语法？

因为考虑到引用的是残缺版的vue，无法解析template配置项的vue

  

   

    

     

    
    

     

      	关于不同版本的Vue：
     
    
   

    

     

    
    

     
	
     
    
   

    

     

    
    

     
		
      1
      .vue
      .js与vue
      .runtime
      .xxx
      .js的区别：
     
    
   

    

     

    
    

     

      				(
      1)
      .vue
      .js是完整版的Vue，包含：核心功能+模板解析器。
     
    
   

    

     

    
    

     

      				(
      2)
      .vue
      .runtime
      .xxx
      .js是运行版的Vue，只包含：核心功能；没有模板解析器。
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
		
      2.因为vue
      .runtime
      .xxx
      .js没有模板解析器，所以不能使用template配置项，需要使用
     
    
   

    

     

    
    

     

      			render函数接收到的createElement函数去指定具体内容。
     
    
  

所以借助render，render内部做了什么:

举个例子：

  

   

    

     

    
    

     

      render(
      createElement){
     
    
   

    

     

    
    

     
    
      return 
      createElement(
      'h1',
      '你好啊')
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      //或者这种写法
     
    
   

    

     

    
    

     

      render: 
      q=>
      q(
      'h1',
      '你好啊')
     
    
  

 总结：

        render函数是vue中生成虚拟dom的底层api，可用于在组件封装中使用js编写动态模板，实现js的完全编程能力。

        vue中在一些复杂场景下使用template模板不太方便，例如需要引入大量子组件时，使用template模板会使代码重复冗余，这时用render函数就可以轻松解决问题。

5. 标签中的ref属性

5.1 ref属性的作用

ref属性

1. 被用来给元素或子组件注册引用信息（id的替代者）
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3. 使用方式：

   1. 
             
      
              
      
               
      
                
      
               
               
      
                
      
                 打标识：
                 <h1 ref="xxx">.....
                 </h1> 或 
                 <School ref="xxx">
                 </School>
                
               
              
      
               
      
                
      
               
               
      
                
      
                 获取：this.$refs.xxx
                
               
             

作用就相当于给一个表情加了个id=“xxx” 然后通过document.getElementById(“xxx”)的效果一样。

5.2 示范

编写一个School.vue组件，然后在App.vue中引入

 我们访问网页 会发现，拿得到Dom元素，测试成功!

 

6. props配置 

6.1 功能

让组件接收外部传递过来的数据,从而达到组件复用的目的
(1).传递数据

<Demo name="xxx"/>

(2).接收数据

第一种方式(只接收):

props:['name']

         会发现以上会出现一个问题，如果我们需要传递18而显示19的话，那就需要做一下调整，因为默认传递过去的是一个字符串类型的数据，所以会造成字符串的拼接，所以我们得在传递的属性上面加 : 或者 v-bind ，他就会将表达式中的值正真的传递过去而不是以字符串的形式。

第二种方式(限制类型): 

  

   

    

     

    
    

     

      props{
     
    
   

    

     

    
    

     
	
      name:
      String
     
    
   

    

     

    
    

     

      }
     
    
  

 会发现传递字符串的话就会报错，一样通过：或者v-bind解决

 第三种方式(限制类型、限制必要性、指定默认值)

  

   

    

     

    
    

     

      props:{
     
    
   

    

     

    
    

     
	
      name:{
     
    
   

    

     

    
    

     
    	   
      type:
      String, 
      //类型
     
    
   

    

     

    
    

     
    	   
      required:
      true, 
      //是否必传
     
    
   

    

     

    
    

     
    	   
      default:
      '老王'
      //默认值
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

      }
     
    
  

备注：props是只读的，不能修改,Vue底层会检测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
如图所示:

总结：

转载：https://blog.csdn.net/pakerder/article/details/127631339