城市上课笔记

---

typora-root-url: ./

vue 基础day01

VUE初步认识

组件的意义

基础语法

1.0VUE初步认识

行业相关

管理岗

开发岗

前端 html css js VUE，js 简历和项目经验

运营

react.js 2013-2014 fb react协议事件

angular.js 2009-2013 Google 更换版本事件

VUE.js 2013年 个人开发/阿里前顾问

1.1 相关指令

黑窗口

win+r 输入 cmd

下载node.js

查看版本 node -v

淘宝镜像

npm install cnpm -g --registry=https://registry.npm.taobao.org

VUE-CLI 脚手架 安装

npm安装指令 npm install -g @vue/cli

安装VUE项目

vue create 项目名称

启动项目

npm run serve

学校win7系统安装VUE

下载node.js

查看版本 node -v

淘宝镜像

npm install cnpm -g --registry=https://registry.npm.taobao.org

VUE 环境安装

cnpm install -g vue-cli

创建项目

• 创建一个文件夹，比如我的是，桌面的zk
• cmd进入创建的文件夹
• 

• 创建webpack项目【vue-cli】 vue init webpack demo
• 

• Project name (baoge)： -----项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）
  Project description (A Vue.js project)： ----项目描述，也可直接点击回车，使用默认名字
  Author ()： ----作者，输入你的大名
  接下来会让用户选择：其实直接回车就行了
• 全部选n
  

• 最后测试运行，如果一下命令出现红色err，再执行一遍，直到运行出现网址，停止就ctrl+c–y,

npm run dev 

2.0组件的意义

​ 我们的所有.vue结尾的文件都是一个单独的视图模型，把大的页面 拆分成多个小的组件

+ build                                     webpack项目创建配置
+ config                                   项目配置文件
+ node_modules                             项目安装的依赖
+ src                                      前端工作目录
  - assets                      图片  文字 资源文件
  - components                  组件的集合
-App.vue     					根组件  
-main.js 						入口文件，核心文件
  
+ static                                   静态的资源文件
-.bablerc								   javascript语法编辑器
-gitignore   							   git的不上传的文件
-package.json                         项目信息及包管理文件

- readme.md                                 注意事项

//基本结构必须要有  且必须有一个用id声明了'app'的div标签
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>



//js部分可以不要
<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

//css部分可以不要
<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>

3.0基础语法

​ 插值表达式 （mustache） ： {{ 命名 }}