vue项目启动步骤

(1). 确保nodejs已经安装

第一步

01-基础-vue-cli 工具-介绍
内置开发时本地服务器，预览代码

1. 统一项目的目录结构
2. 内置开发过程中用到的各种工具

• (1). babel编译
• (2). eslint代码风格约束
• (3). less预处理器

3. 内置开发时本地服务器，预览代码
   • 自动刷新，方便预览
   • 热更新
4. 其它高级功能
   02-基础-vue-cli-安装
5. 安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

命令说明

6. cd mq-project 代表进入文件夹 mq-project

7. npm run serve 代表启动vue项目(启动本地服务器，进行了编译等操作)【运行vue的命令】

安装失败

• 大部分是网络问题 等待
• 切换淘宝源 或者使用yarn安装
• 如果是缓存问题 --(可以使用这两段其中之一)–
  npm cache clean --force
  npm install @vue/cli --force

检查是否安装成功

1. 可以使用这个命令
   vue --version
2. 若安装成功会显示当前版本号
3. 4.4.6 //则可

03-基础-vue-cli-创建项目

第二步

1. 打开gitbash
2. 在终点输入这个命令则可
3. vue create mq-prject
4. 选择创建方式->default ->回车等待安装

04-基础-vue-cli-项目目录解释

 mq-project        # 项目目录
    ├── node_modules # 项目依赖的node包
    ├── public       # 最终打包输出的静态文件目录
    ├── src          # 业务文件夹
    ├── .gitignore   # git提交忽略配置
    └── babel.config.js   # babel配置
    ├── package.json      # 描述项目及项目所依赖的模块信息
    ├── package-lock.json   
    └── README.md   # 项目说明
    
    
{
     
  // 项目注册好的可执行命令 
  // npm run serve -> vue-cli-service serve
  "scripts": {
     
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  // 开发环境和生产环境都需要依赖的包
  "dependencies": {
     
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  // 开发环境所依赖的包
  "devDependencies": {
     
    "@vue/cli-plugin-babel": "^4.4.0",
    "@vue/cli-plugin-eslint": "^4.4.0",
    "@vue/cli-service": "^4.4.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "vue-template-compiler": "^2.6.11"
  }
}

注意：

1. src:里面的文件夹的东西:

- main.js  整个项目的入口文件  不能删除不能修改名称  
- app.vue  整个项目的根组件  其他组件都是它的子孙组件
- components  放置我们组件的地方 名称是自定义的 但是不建议修改
- assets  方式应用的静态资源  图片 icons

05-基础-vue-cli - 理解单文件组件.vue

1.SFC single file component  单文件组件
// 组件的模板  ->  template选项
<template></template>
// 组件的脚本js逻辑   -> 除了template选项之外的其他所有组件项
<script></script>
// 组件的样式
<style></style>

2.vue-loader  转换器  将.vue文件转换成vue组件的配置项
  .vue -> 
  {
     
    components:{
     },
    data(){
     
      return {
     

      }
    }
    ....
  }

3. 为什么要这么设计？
   1.解决字符串模板没有语法提示
   2.加入了编译的环节 有机会做一些提前优化和预编译语言处理（less）
   3.让组件的结构更加清晰 每一个.vue文件就是一个独立的vue组件

4. 插件
   vscode -> vetur

补充说明：安装dev-tools

1. dev-tools的使用流程:

• 1.打开chrome -> 右上方点击三个点 -> 更多工具 -> 扩展程序
• 2.右侧找到开发者模式，将其开启
• 3.将解压之后的dev-tools文件夹拖拽进去即可完成安装
• 4.重启chrome浏览器 f12/右键检查 找到控制面板中的更多展开按钮点击 Vue
• 5.使用vue开发的应用在浏览器打开时 dev-tools会被激活 可以开始调试

5.使用vue开发的应用在浏览器打开时 dev-tools会被激活 可以开始调试

components  // 业务通用型组件（比较小 功能比较单一）
views   // 放置路由路径对应的组件（往往比较大 级别比较高 功能比较多）
router  // 放置路由初始化配置的文件
app.vue // 更组件
main.js // 入口文件

第三步：

(1). 项目的流程进行一大半进下来开始在项目写代码

// 1.定义子组件

<template>
  <div class="test">
    我是TEST组件
    {
     {
     name}}
  </div>
</template>

<script>
// 写组件的配置项
export default {
     
  data () {
     
    return {
     
      name: 'test'
    }
  }
}
</script>
// lang="less" 代表内部要使用less预处理器  
// scoped 代表里面的样式只针对于当前组件生效
<style lang="less" scoped>
  .test{
     
    font-size:20px;
    color:red;
  }
</style>

2.子组件的使用

<template>
  <div id="app">
    我是根组件
    <!--使用 -->
    <Test></Test>
  </div>
</template>

<script>
// 引入
import Test from './components/Test.vue'
export default {
     
  name: 'App',
  // 注册
  components: {
     
    Test
  }
}
</script>

<style lang="less">
</style>

问题：

• 1.遇到 less-loader 可以把lang=“less” 删掉
  • ctrl + c 退出
  • npm install less-loader -D (为项目安装less-loader解析less语法)
  • 使用命令重新运行
  • npm run serve

基础-case 案例-效果演示

• 1.进入sever文件夹启动本地mock数据服务
  json-server db.json --port 6005
• 2.进入项目文件夹启动项目 (打开终端然后使用命令运行则可)
  npm run serve

(2). 基础-case案例-导入样式文件

• 导入bootstrap

• (打开终端然后使用命令运行则可)
  npm install [email protected]

• 在main.js中通过import的方式导入即可
  import ‘bootstrap/dist/css/bootstrap.css’
  css-loader -> style-loader

(3). 基础-case案例 - 根组件模板

<template>
	<div id="app" class="container">
	  <!-- 头部区域 -->
		<div class="row">
			<div class="col-md-2">
				 <!-- 左侧导航区域 -->
			</div>
			<div class="col-md-10">
				 <!-- 右侧侧导航区域 -->
			</div>
		</div>
	</div>
</template>

(4). 基础-case案例-提取公共组件-头部组件

<template>
  <nav class="navbar navbar-inverse">
    <p class="navbar-text">米奇案例</p>
  </nav>
</template>

(5). 基础-case案例-提取公共组件-侧边栏组件

<template>
  <div class="list-group">
    <router-link to="/mq" class="list-group-item">商品列表</router-link>
    <router-link to="/zb" class="list-group-item">手机列表</router-link>
    <router-link to="/jn" class="list-group-item">笔记本列表</router-link>
  </div>
</template>

(6). 基础-case案例 - 完成路由功能

import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入路由地址对应的组件
import case1 from '@/views/case1.vue'
import case2 from '@/views/case2.vue'
import case3 from '@/views/case3.vue'
import ZbList from '@/views/ZbList.vue'
import JnList from '@/views/JnList.vue'
// 使用插件，必须在vue实例化之前
Vue.use(VueRouter)
// 配置路由规则
const routes = [
  {
      path: '/', redirect: '/mq' },
  {
      path: '/case1', component:  case1},
  {
      path: '/case2', component: case2},
  {
      path: '/case3', component: case3 },
  {
      path: '/zb', component: ZbList },
  {
      path: '/jn', component: JnList },
]
// 实例化路由
const router = new VueRouter({
      
  routes
})
// 导出路由
export default router

注意：

• 传统script方式 和 npm 使用的方式
  • npm使用下需要在new Vue实例之前 先完成插件的注册 注册方式为
    Vue.use(VueRouter)

(7). 基础- case案例 - 完成商品列表组件/添加组件/修改组件的业务逻辑

• 列表组件模板

<template>
	<div class="list">
		<button class="btn btn-primary">添加英雄</button>
		<hr />
		<table class="table table-striped">
			<thead>
				<tr>
					<th>ID</th>
					<th>商品名称</th>
					<th>小米</th>
					<th>创建时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1001</td>
					<td>米奇</td>
					<td>男</td>
					<td>7/31</td>
					<td>
						<button
							class="btn btn-success"
							style="margin-right:10px"
						>编辑</button>
						<button  class="btn btn-danger">删除</button>
					</td>
				</tr>
				<tr>
					<td colspan="5" style="text-align:center">暂无数据</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

• 添加组件模板

<template>
	<div class="hore-add">
		<h3>添加商品</h3>
		<hr />
		<form class="form-horizontal">
			<div class="form-group">
				<label class="col-sm-2 control-label">商品名称</label>
				<div class="col-sm-10">
					<input  type="text" class="form-control" style="width:200px" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">商品价格</label>
				<div class="col-sm-10">
					<input  type="radio" value="昂贵" /> 昂贵
					<input  type="radio" value="便宜" /> 便宜
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button class="btn btn-primary">添加</button>
				</div>
			</div>
		</form>
	</div>
</template>

• 编辑组件模板

<template>
	<div class="hore-edit">
		<h3>编辑商品</h3>
		<hr />
		<form class="form-horizontal">
			<div class="form-group">
				<label class="col-sm-2 control-label">商品名称</label>
				<div class="col-sm-10">
					<input  type="text" class="form-control" style="width:200px" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">商品价格</label>
				<div class="col-sm-10">
					<input  type="radio" value="昂贵" /> 昂贵
					<input  type="radio" value="便宜" /> 便宜
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button class="btn btn-primary">保存</button>
				</div>
			</div>
		</form>
	</div>
</template>

• 先到这里有空在更新-------
• 求大佬别喷