Vue 脚手架搭建（v5.08）和基本项目介绍

vue开发的两种方式

• 核心包传统开发模式：基于html / css / js 文件，直接引入核心包，开发 Vue。
• 工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue

工程化开发模式优点：
 提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等
工程化开发模式的问题

• webpack配置不简单
• 雷同的基础配置
• 缺乏统一的标准

Vue脚手架搭建

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

优点：

1. 开箱即用，零配置
2. 内置babel等工具
3. 标准化的webpack配置

1.安装node.js

node.js官网下载页

安装方法请看：安装教程

2.淘宝镜像、安装Vue脚手架（配置镜像站用于提高下载速度）

1. 首先在键盘上按win+R，输入cmd，打开命令窗口

2. 在命令窗口输入下行命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 完成后，输入以下指令下载vue脚手架

cnpm install -g @vue/cli  //若未成功需要安装cnpm  npm install cnpm -g
npm install -g @vue/cli  //此命令也可以，但速度较慢

npm是什么
大神介绍

3. 安装好了之后我们就可以开始搭建项目了

建一个文件夹，尽量用英文命名。

输入cmd

这里开始，我们就可以开始创建项目了！

1、vue create 项目名称 ，项目名称我这里取demo1，等待一会即可

2.可根据自己需求选择使用vue2还是vue3 这里我们选择 Manually select features （手动）
（注：通过空格↑ ↓控制光标上下移动，空格多项选择/取消其中之一，enter继续下一步 ， a 全选或反选 ，`i``选择反向 ）

3.根据自己需求选择项目所需的功能

4. 这里选择2.x版本
   

5.选择一个css预处理器，这里选择Less

6.配置文件放在哪里？第一项为放在专用的配置文件中，第二项为放在package.json中，这里我们选择第一项

7.最后一步，是否保存当前配置，之后会默认次配置？这里我们选择n

如果选择y，之后需要重新配置，可以如下操作

(1). 到达C:\Users\Administrator 下面
(2). 打开文件隐藏文件夹选项
(3). 找到.vuerc文件

(4). 打开文件,可以看到相关的默认设置 ,在这里 可以去掉或者添加需要的配置

{
	"useTaobaoRegistry": true,
	"latestVersion": "4.5.4",
	"lastChecked": 1599700651327,
	"presets": {  
	"vue-cli init": {
	    "useConfigFiles": false,
	    "plugins": {      
	    "@vue/cli-plugin-babel": {},
	          "@vue/cli-plugin-router": {
	             "historyMode": true      
	            },
	     "@vue/cli-plugin-vuex": {},
 	    "@vue/cli-plugin-eslint": {
 	           "config": "base",
 	           "lintOn": ["save"]      
  	          },      
	     "@vue/cli-plugin-unit-jest": {}    
	     },    
 	    "cssPreprocessor": "node-sass"  
	     }
	}
}

如果实在是不知道如何选择配置,可以直接删掉该文件.然后vue-cli构建项目的时候会自动回到最初的状态

8.进入wue项目目录
cd ./demo1

9. 输入npm run serve ,若显示如下界面 则完成配置

Vue项目目录介绍

虽然脚手架配置文件很多，但我们只需要认识三个文件即可

1. main.js 入口文件
2. App.vue App根组件
3. index.html 模板文件

组件化开发

组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。
组件化的好处：便于维护，利于复用 → 提升开发效率。
组件分类：普通组件、根组件。

根组件App.vue

整个应用最上层的组件，包裹所有普通小组件

组件的三部分

• template：结构 （有且只能一个根元素）
• script: js逻辑
• style： 样式 (可支持less，需要装包)

<style lang="less" scoped>
// style标签，lang="less" 开启less功能 
// scoped 限制样式的作用域，只对当前组件的元素生效，不会影响到其他组件的样式
</style>

普通组件的注册使用

局部组件

1. 特点：只能在注册的组件内使用

2. 注册步骤：
   (1). 在components中创建.vue文件
   (2). 在使用的组件内 先导入 再注册，最后使用

3. 使用方式：当成html标签使用即可 <组件名></组件名>

4. 注意：组件名规范 —> 大驼峰命名法， 如 HmHeader

App.vue导入局部组件

<template>
  <!-- template根元素只能有一个 -->
  <div class="box">
    <h1>Hello</h1>
    <!-- 3.使用组件 -- 当做标签名使用即可 -->
    <MyButton></MyButton>
    <my-div></my-div>
    <Msg />
  </div>
</template>

<script>
// 默认导出一个对象;
// 一个单文件组件本质上就是一个可复用的vue实例
// data methods watch ...

/* 
  组件使用方式 局部组件三部曲
   1.导入组件
   2. 注册组件
   3.使用组件 -- 当做标签名使用即可
*/
// 1.导入组件
import MyButton from './components/MyButton.vue'
import MyDiv from './components/MyDiv.vue'

export default {
  // 组件的名称，建议加上方便调试
  name: "App",
  // 2. 注册组件
  components:{
    MyButton,
    MyDiv,
  }
};
</script>

全局组件

1. 特点： 全局注册的组件，在项目的任何组件中都能使用

2. 注册步骤：
   (1). 创建.vue组件（三个组成部分）
   (2). main.js中进行全局注册

3. 使用方式：当成HTML标签直接使用 <组件名></组件名>

4. 注意：组件名规范 —> 大驼峰命名法， 如 HmHeader

5. 语法： Vue.component(‘组件名’, 组件对象)

main.js导入全局组件

// 导入vue
import Vue from 'vue'
// 导入根组件
import App from './App.vue'

// 导入Msg全局组件
import Msg from './components/Msg'
// Vue.component()注册的组件
Vue.component('Msg',Msg)


Vue.config.productionTip = false

// 创建vue实例
new Vue({
  // 渲染函数
  // 把App组件渲染成网页内容 （html+css+js）
  // 替换掉id为app的容器
  render: h => h(App),

}).$mount('#app')// 挂在到#app中