vue 脚手架安装
1.安装node.js最新版本
2.cmd下输入
1.node -v得到版本号检测是否安装成功 版本号要在6.9以上
2.npm -v 版本号要在3.10以上
3.安装脚手架
1.npm install --global vue-cli //(windows下) mark下最前面要输入sudo //全局安装CLI
2.vue --version //检测CLI是否安装成功 得到版本号
3.cd 项目文件夹下/ //~为路径 新建个文件夹 mkdir 文件夹名
4.vue init webpack 文件名 //下载文件
Project name 文件夹名 //可以修改,不修改回车
Project description //项目描述
Author //作者信息
Runtime //一些信息。。。 回车就好
Install vue-router? //是否安装vue-router n
Use ESLint to lint your code //是否安装ESLint n
Setup unit tests with Karma + Mocha //是否安装Karma + Mocha n
Setup e2e tests with Nightwatch //是否安装Nightwatch n
5.cd vue-playlist/
6.npm install //安装
7.npm run dev //运行文件 端口8081 localhost
这样vue框架就下载下来啦
目录中最重要的为src文件夹
顺序:index.html->main.js->App.vue(父组件)->HelloWorld.vue(子组件)
index.html:入口文件 与main.js有直接的关系
src->assets:可以用来放一些图片
src->components:可以用来放一些组件
src->components:根组件
src->main.js:重要文件 实例化vue中不可少的el(要控制的容器元素), template(模板) components(调用模板就要注册一个)
App.vue:包含三部分
1.template:模板(html结构) //一定要有且只能有一个根标签
2.script行为:处理逻辑
想要调用组件
一 import 名字 from 路径 (在scripts上面)
二 components:{"自定义一个名字":名字} //不能起跟系统标签冲突的
三 在template下调用名字 <自定义的名字><自定义的名字/>
3.style样式:解决样式 想要样式不冲突 <style scoped> </style>
scss安装:npm install node-sass sass-loader -D