Vue脚手架初步认识1

• vue 脚手架
  • 安装
    • 安装vue脚手架 npm i @vue/cli -g
  • 创建Vue项目
    • vue create myvue 创建一个叫做myvue的项目

      

  • 运行项目
    • cd myvue 进入项目目录

      

    • npm run serve 运行项目

      

  • 项目的目录结构

    

  • .vue
    • 1.在脚手架里面 .vue是一个文件也是一个组件
      • 2. .vue 由三部分组成:template,script,style
      • 3. template视图显示部分:只能有一个子节点
      • 4. script业务逻辑数据存储
      • 5.script 中data用函数的形式返回一个对象
      • 6. vue指令连接了script和template
      • 7. style 展示样式
      • 8. 使用scope实现样式隔离(script中的样式只在当前组件启用)
    • template 有且只有一个子节点
      • <template></div>内容</div></template>
    • script逻辑
      • data必须是函数返回一个值
      • export default{data(){return {msg:"脚手架写大项目"}}}
      • <p>{{msg}}</p>
      • <input v-model="msg">
    • style样式
      • 定义样式<style>.green{color:"green"}</style>
      • 可以通过scoped限定样式使用范围 在本组件
      • <style scoped="scoped"></style>
      • <style scoped></style>