初识 Vue脚手架

vue-cli是什么 vue-cli是有Vue提供的一个官方cli,专门为单页面应用快速搭建繁杂的脚手架。

Vue脚手架的安装(首先需要安装好nodejs)

（1）node官网下载node.js(下载过可以调过这一步)

（2）win+r打开命令控制台 输入

npm config set registry https://registry.npm.taobao.org

   建议配置npm淘宝镜像

（3）运行npm i @vue/cli -g(安装vue脚手架)

  (4)   vue -version 查看是否成功

创建vue项目

切换到你要创建项目的目录，然后使用命令创建项目，并选择vue版本（可打开文件夹直接在文件夹地址栏输入cmd）

vue  create myvue   创建一个叫myvue的项目

创建好之后会生成一些文件和文件夹

node_modules 插件安装目录

public 公用文件和模板目录

src 源文件目录（较重要）

.gitignore 上传到服务忽略配置

bable.config.js ES6转ES5配置

jsconfig.json js配置

package-lock.json 插件安装地址缓存（较重要）

README.md 项目说明文件

vue.config.js vue项目配置文件

src 项目的源文件

--assets 资源目录

----logo.png  LOGO

--conponents 存储自定义组件目录

----HelloWorld.vue 默认组件

--*App.vue vue根组件

--main.js 项目入口文件

启动项目

cmd中进入刚刚创建的文件，启动项目

npm run serve   运行项目

 当出现以上内容则 表示运行成功

如果要退出的话可以使用crtl+c

浏览器复制-Local地址即可查看运行的默认的Vue页面

Vue基础结构

包含三部分:template模板 , script逻辑 , style样式

template 有且只有一个子节点

data 必须是函数返回一个值
export default {
    data(){ return {msg:"脚手架写大项目"}}
}

vue的指令连接了 template 和script
<p class="green">{{msg}}</p>
<input v-model="msg"/>也就是数据的双向绑定

style中定义样式 与css保持一致
可以通过scoped限定样式使用范围在本组件
<style scoped="scoped"></style>或者简写为
<style scoped></style>