VUE.js学习笔记--VUE-CLI脚手架

安装vue-cli

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。

安装cli：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
创建vue工程:
vue create my-project
# OR
vue ui

创建vue+node项目

1、首先打开cmd命令行，查看node.js和npm是否已经安装，新版的node.js默认安装npm的

查看是否有安装

_{对于node不了解的可以看下我之前总结的node.js入门如果对您有帮助欢迎点赞}~
[NODE.JS包浆记] https://www.jianshu.com/c/bd95bc394f5b
2、使用命令全局安装vue-cli脚手架
npm install -g vue-cli
注：因为跟着学习的视频以及大多数教程都是用的旧版的vue-cli所以如果你跟我一样是前端菜鸟也是在网上自学的话差不多也是看到的这个命令，但是官网其实已经更新为vue-cli-3了，这是官网对于旧版换新颜的说明：

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
新的脚手架需要node.js 8.9以上的版本，因为包名换了所以安装命令应该改为
npm install -g @vue/cli

安装完成后可以用vue –version 来查看（我安装的是旧版）

3、然后就可以开始创建一个vue项目啦
在指定目录下执行创建项目命令： vue create hello-world （hello-world为项目名称）或者 vue ui（图形化创建）执行后会需要选择一些配置

图片来自互联网

4、然后cd进入到项目文件夹内，执行 npm install会发现项目结构里，多了一个node_modules文件夹（该文件里的内容就是之前安装的依赖）
以上步骤完成后就能在目录下找到以下工程文件夹啦，目录如下

工程目录结构

创建出来的工程目录

• build 文件夹下放置的是一些项目的webpack配置文件
• config 文件夹下是一些开发环境和线上环境的配置文件
• node_modules 文件夹放置的是项目的依赖文件
• src 放置的是源代码
• static 文件夹放置的是静态资源
• test 为测试用例文件夹
• .babelrc 文件为针对babel的编译文件
• .editorconfig，浏览器配置文件
• .gitignore git检测工具
  这些文件都不需要修改，默认即可
• Index.html，项目的网页入口
  在项目开发的过程中主要在src下编写代码
  然后我们执行 npm run dev命令，即可启动项目
  
  
  
  一顿疯狂运行后得到：
  
  

  启动成功
  
  此时我们便可访问http://localhost:8080得到初始页面啦：
  
  

项目源码分析

Html文件

这就是入口的index文件了，可以看到有一个id为app的div我们去src看源码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'//相当于引入./router/index，index可以省略，其他名字则不可以

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },//引入了src目录下的app.vue组件，es6写法，等同于components:{App:App},当键值相等可以只写一个
  template: ''
})

Src中的main.js文件，绑定了index里的app接入了app.vue局部组件

App.vue：

这是一个完全封装的vue组件，包括