Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test
For a detailed explanation on how things work, check out the guide and docs for vue-loader.
项目初始化
1.安装nodejs
http://www.runoob.com/nodejs/nodejs-tutorial.html下载并安装,
解压版需手动配置环境变量(bin)到根目录
2.安装webpack和[yarn]
npm install -g webpack
npm install yarn -g
查询yarn的安装目录 yarn global bin
3.安装vue
a. npm install -g vue
b. yarn global add vue
4.安装vue-cli
a. npm install -g vue-cli
b. yarn global add vue-cli
5.生成vue项目
vue init webpack 项目名
6.cd 项目名
7.运行项目
npm run dev
项目目录结构
index.html:项目根视图
.postcssrc.js:postcss配置文件
static:静态文件目录
模板语法
this:指vue组件本身
$event:DOM对象本身
Vue组件(包含3个部分):
template：视图
script：逻辑
style：样式
Mustache:模板
表现形式：，只能包含单行语法
Vue基本指令：
v-html=”属性”:渲染html
v-text=”属性”:渲染文本
v-bind: 绑定属性
Vue条件渲染:
< h1 v-if=”true”>我是if看见的
< h1 v-else-if=”true”>我是else-if看见的
< h1 v-else>我是else看见的
< h1 v-show=”true”>和if用法一样(标签会加载,false时只是被隐藏了)
Vue列表渲染:
v-for
修饰符：
.stop 停止
.prevent
.capture
.self
.once 一次有效
用法：v-on:click.stop
vue3
创建项目
vue create mydemo
