Vue构建脚手架(保姆级详细教学)

Vue构建脚手架(保姆级详细教学)

介绍:
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,通过 @vue/cli 实现的交互式的项目脚手架，通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发，懒得看介绍可以直接执行我的加粗指令，快速构建项目。

0.前提条件
安装node.js(有些项目对于node版本有具体要求，建议直接安装nvm来切换各个版本node，用于项目开发)，因为我们需要使用其自带的npm进行指令操作，所以node是必不可少的流程。
1.安装node后，首先找到一个空文件夹右键(用cmd也可以)，点击git bash here，输入npm install -g @vue/cli进行cli包下载，cli是一个npm全局包，里面存放许多vue命令，我们通过这些命令进行对项目进行安装。

如上图，下载成功后，执行vue -V,确认安装是否成功，如果出现相应的版本号，则说明安装成功。

如果想看一下vue-cli包的样子，也可以找npm的下载路径，点击其中的node_Modules文件夹，我们会看到vue-cli。

2.下面我们选择项目安装位置的文件夹，执行 vue create demo1(文件名称),

他会有三种选择，分别是二代vue的、三代vue的脚手架、以及自己选择配置三种情况，我们选择一种，自己默认配置，接下来默认执行，出现下图样子就大功告成了

3.我们打开编辑器可看到项目结构
项目结构介绍如下：

    1. README.md    :写一些运行调试的提示语句或相对其他开发者说的话
    2.  package.json:   (1)有scripts脚本  npm run serve   (2)项目所需的依赖
    3. package-lock.json:   锁定依赖的版本
    4. babel.config.js 了解，是babel在转换es6+代码时的配置
    5. .gitignore: git的忽略文件，指定的文件和目录不会提交到git仓库
    6. node_modules: nodejs的包文件
    7. public
             (1)favicon.ico : 网站缩略图
             (2)index.html:  项目中唯一的一个网页，内部有一个#app的div


    8. src: 最重要的文件夹，存储项目的源代码

        (1) main.js : 是整个项目的入口文件

        (2) App.vue:  它是一个vue的单文件组件(只要有.vue文件，即为一个独立的组件，组件中有三个标签： template,script,style)


入口文件main.js

        (1) import Vue from 'vue'
            等同于引入vue.js  <script src="./js/vue.js"></script>

        (2)import App from './App.vue'
            引入根组件App
            App是单页面应用中的唯一的根组件,以后开发的组件都会放在App内部
    

        (3) Vue.config.productionTip = false
            隐藏开发模式的提示：

        (4) 创建vue的根实例

            // h是一个渲染dom的回调,将App组件渲染到id=app的dom结构中
            // $mount('#app'):   #app即为public文件夹中index.html中的<div id="app"></div>

            new Vue({
                render: h => h(App),
            }).$mount('#app')