vue脚手架安装

一、vue脚手架安装

1、安装

npm i @vue/cli -g

2、创建vue项目 

1. cd/  切换到c盘目录
2. vue create myvue  创建一个叫myvue的项目
3. cd myvue 进入项目目录
4. npm run serve 运行项目

 二、vue脚手架项目目录结构

（1）myvue文件夹

•  node_modules 插件安装目录
• public 公用文件和模板目录
• *src 源文件目录
• .gitignore 上传到服务器忽略配置
• bable.config.js ES6转ES5配置
• jsconfig.json   js配置
• *package.json  包管理（项目管理目录）
• package-lock.json   插件安装地址缓存
• README.md  项目说明文件
• vue.config.js  vue项目配置文件

（2）src文件夹

•  --assets 资源目录
• ----logo.png logo
• --components  存储自定义组件目录
• ----helloworld.vue   默认组件
• --*App.vue    vue根组件
• --main.js   项目入口文件

（3）.vue 结构 

• template 组件

         template有且只有一个子节点

  
  

    
    

     
     

    
    
    
    

     
     

      
      <template>
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
          
      
      <div>
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
              
      
      <h1>你好啊
      
      </h1>
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      </div>
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      </template>
     
     
    
    
  
  

•  script  逻辑

         data用函数的形式返回一个对象        

  
  

    
    

     
     

    
    
    
    

     
     

      
      export 
      
      default {
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
              
      
      data(
      
      ){
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
                  
      
      return{
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
                      
      
      msg:
      
      'vue-脚手架写大项目'
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
                  }
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
              }
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
          }
     
     
    
    
  
  

•  style  样式

         定义样式

  
  

    
    

     
     

    
    
    
    

     
     

      
      <style scoped="scoped">
      
      
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
        
      
      .green{
      
      background-color: greenyellow;
      
      color: 
      
      #fff;}
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      </style>
     
     
    
    
  
  

       通过scoped限定样式使用范围在本组件中

  
  

    
    

     
     

    
    
    
    

     
     
 
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      <style scoped=
      
      "scoped"></style>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
 
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      <style scoped></style>