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 bootstrap@3.4.0
  
  
• 在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> 

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