Champagne&Caviar
Champagne&Caviar

note_1：vue.js深入浅出_1

Vue.js深入浅出_1

参考

  • 网易云课堂：Vue深入浅出（从入门到开发）
  • 官网：Vue.js中文文档
  • github：Vue Devtools
  • google应用商场chrome版Vue插件
  • 官网：sublime-text-3（挂了）
  • github：多页面vue
  • 官网：node.js
  • 官网：npm
  • 博客：vue webpack多页配置

目录

  • Vue.js深入浅出_1
    • 一、准备工作
      • 1.代码编辑软件
      • 2.npm
      • 3.Node环境
      • 4.vue实时调试插件
    • 二、安装
      • 1.一期
      • 2.二期
    • 三、创建空项目
      • 1.App.vue
      • 2.Hello.vue
      • 3.语法高亮
    • 四、基础语法
      • 1.创建新文件
      • 2.结构
        • （1）template
        • （2）script
        • （3）style
      • 3.属性
        • （1）name
        • （2）data
        • （3）methods
        • （4）computed
        • （5）props

一、准备工作

1.代码编辑软件

  • 安装sublime-text或者别的

2.npm

  • 安装npm

3.Node环境

  • 安装node.js

4.vue实时调试插件

  • 安装chrome版或者其他版Vue.js devtools

二、安装

1.一期

推荐vue-cli安装脚手架，更适合实际开发
检查是否已经安装了node.js和npm

# 查看npm版本
$ npm -v
# 查看node.js版本
$ node -v

2.二期

输入以下命令

# 全局安装vue-cli，装在哪里都一样
$ npm install --global vue-cli

# 建一个新文件夹专门用来放project
# 创建一个基于webpack模板的项目
# 中间会有配置，不想设置可以直接回车跳过
# vue-router和vue-resource可以先不装
# unit-test也可以先不装
# 之后可以很方便地再装回去
$ vue init webpack my-project

# 如果上一步创建完之后如果选了yes就会自动执行（这条指令不用打也可以）
# 装配置的插件之类的东西
# 可以在my-project文件夹下package.json的devDependencies里面看到
$ npm install

# 进入my-project
$ cd my-project
# run完后千万不要把窗口关了，不然localhost会断开
$ npm run dev

脚手架：详情见Folder Structure
vue webpack多页配置可以参考多页配置
在浏览器地址栏输入localhost:8080会看到有字有图，反正不是空的

三、创建空项目

可以在down下来的项目中删除部分代码，改成空项目
进入src目录，找到App.vue。

1.App.vue

  • 删除
  • 删除
  • 删除import ...
  • 删除export default的components里面的Hello
  • 保存

进入components目录，找到Hello.vue

2.Hello.vue

  • 删除Hello.vue
  • 保存

刷新浏览器，是空白的。右键检查元素，没报错。

3.语法高亮

针对sublime-text

  • tools -> command-palette
  • 输入install package并回车
  • 搜Vue Syntax Highlight并安装
  • 关了当前的App.vue，再重新打开就会有语法高亮

四、基础语法

1.创建新文件

App.vue中