更新vue-cli3脚手架时遇到的问题

时隔两月，我又来重新安装脚手架了，好开森，有博客可写啦！！！容我先讲述事况：本人原本只是打算新建一个项目，奈何vue-cli3脚手架版本太低，嘿呀！怕啥？更新就行！！！

然后，err，err，err…

诶，没更新成功，算了，爷不更了，创建项目去！！！
然后…这下好了！

其实我不想出安装脚手架的教程，但是此刻我有预感，我即将回到改革前，宝儿们，我马上就要踩坑去了！

A moment later…
我不能用亲身经验教你们了，找别人的博客哇！！！我好难过啊，真的。

stop，回归正题，按上图中的提示删除文件就行

命令行中： del (对应文件)【主要得删除父文件：.bin】---->成功
之后就可以创建项目了！！！

---

---

---

如下，寒假期间的vue-cli脚手架的部分资料，需要自取！前半部分vue-cli2，但是目前要用vue-cli3哦！但值得康一康哦

第一章 vue-cli2脚手架

vuecli基本文档结构，页面跳转的基本方法

1.1 Node.js环境安装

1. 常用dos命令
   • cd 打开文件夹
   • md 创建新文件夹
   • dir 查看文件夹内容
   • cd 返回上一级文件夹

1.2 npm安装及参数设置及vue-cli安装

1. npm和cnpm的区别：

• npm是nodejs的包管理器，用于node插件管理（安装，卸载，管理依赖）
• cnpm：国内镜像代替国外脚手架

2. -g参数：

   • 全局安装（global），可以在命令行下直接使用
   • 可以通过npm root -g查看全局安装的文件夹位置
   • cnpm install -g vue-cli

3. c/npm install -g vue-cli

4. -S，-D操作

   • -S,–save安装包信息将加入到dependencies(生产阶段的依赖)
   • -D，–save–dev安装包将加入到devDependencies(开发阶段的依赖)，所以开发阶段一般用它
   • i是install的缩写（注：前面无“-”）

5. vue-cli2安装

1.3 创建vue-cli项目

1. vue init webpack(所选择的模板) projectName（工程的名字，不可以出现大写字母）

2. 创建cli过程中部分配置内容

   • Install vue-router？（Y/n）是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车
   • Use ESLint to lint your code?(Y/n)是否使用ESLint管理代码，ESNLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用

3. cd test1；npm run dev

1.4 敲出HelloWorld

1. components:自定义的组件，vue文件的创建
2. router（配页面路由）：index.js
   • 先引入
   • 根目录改变为指定的文件名

1.5 跳转“页面（组件）”

1. index.js中的routes中的component是提前import中引入的目录components下的first.vue文件

   • path：/是根目录
   • name：渲染的位置

2. first.vue通过index.js到a.vue或b.vue

   • fisrt.vue（/目录）
     ```
     
     

     
     转向a页面
     转向b页面
     
     
     

      ```
     

   • index.js

     import Vue from 'vue'
     import Router from 'vue-router'
     import HelloWorld from '@/components/HelloWorld'
     import First from '@/components/first'
     import A from '@/components/a'
     import B from '@/components/b'
     
     Vue.use(Router)
     
     export default new Router({
      routes: [
        {
          path: '/',
          name: 'First',
          component: First
        },
        {
          path:'/a',
          component: A
        }
        {
          path: '/b',
          component: B
        }
      ]
     })
     

• a.vue(/a目录)

    	<template>
    	    <div>
    	        我是A...
    			<p><router-link to='/'>返回</router-link></p>
    	    </div>
    	</template> 
  

1.6 router实现子路由（嵌套路由）

1. 用于三级目录

   • 文件A1.vue创建好之后
   • js中注册路由：import引入之后在注册
     • 子路由的方式

2. 实现嵌套效果的路由： children[{},{}]

3. a页面的父页面是否一直显示，子页面A1需要挂载在a上、

   • a页面要挂载子路由，才能跳转到A1页面。<router-view></router-view>
   • 但a页面相当于父页面，会一直挂载在A1上

4. index.js

     {
   
      path:'/a',
   
      component: A,
   
      children: [
   
   ​    {
   
   ​    path: '/A1',
   
   ​    component: A1
   
   ​    }
   
      ]
   
     },
   
   

5. 子路由的方式，会连带附录由一起显示

1-7 为什么不用#号

1. 小贴士
   • hash模式： 地址栏包含#符号，#以后的不被后台获取
   • history模式：具有对url历史记录进行修改的功能
   • 在微信支付、分享url作为参数传递时，#不能满足需求
   • history需要后台配合，处理404问题
2. 路由显示模式改为： mode: 'history',
3. #为特殊字符，很多场合不被满足

1-8 单独安装eslint

1. eslint:代码规范检查

   • –save-dev:安装到开发，编辑ing
   • –save：安装到生产环境
2. • 下载：npm istall eslint --save
   • 卸载： npm uninstall eslint --save

1-9 导入其他项目添加依赖并运行

1. 怎样导入vue-cli项目

   • npm install添加依赖–>npm run dev

1-10 居中实现（主组件的样式设置）

1. app.vue理解为主组件，路由里的每个内容为子组件

   • app.vue 可改变style
   • first中style，script都可

第二章 Vue-cli3脚手架

2.1 手动搭建vue-cli环境

1. 不用vuecli模板

   • 安装依赖：npm install或者cnpm install
   • 初始化： npm init -f或者cnpm init -f
   • 安装组件，并查看安装后的内容

2.2 vue-cli3安装/升级-1and图形界面

1. 卸载vue-cli2：npm uninstall vue-cli -g
2. 安装vue-cli3：c/npm install -g @vue/cli
3. 打开图形界面：vue ui

2.3 vue-cli3创建项目

1. • 安装vuecli3：vue create vue-test3
   • 启动：npm run serve
2. cd vue-test3
   $ npm run serve
3. components就是写组件，views

2.4 vue-cli3导入其他项目并运行

1. • cd test1
   • cnpm install
   • npm run serve/dev(3的环境中打开2的执行命令dev)

2. 运行2中的项目案例

   • index.js

     import { createRouter, createWebHistory } from 'vue-router'

     import Home from '../views/Home.vue'

     import First from '../components/first.vue'

     import A from '../components/A.vue'

     import B from '../components/B.vue'

     import A1 from '../components/A1.vue'

• 相关的路由分析：要加挂载点

2-5 vue-cli3中添加样式的三种方法

1. 内部样式表：vue文件里写上style

   • 对转向页面添加样式： a{}，全局效果

2. 外部样式表：public文件中

   • 外部样式表中关联进来

3. 公共的加在public下的index.html中

第三章 项目案例

3-1 创建项目

1. • 组件及组件间传值
   • axios实现读取json数据：商品的数据源存于json中

• css相关技术进行布局：布局，间距等样式
  • 使用views页面级组件，使用router设置页面

2. vue create proj1

3-2 页面初始化及banner图片显示及页面布局

1. public中存放会改变的文件，src中的assets文件会变动

2. components零部件，views页面显示

3-3 导航设置

1. 把src>components>left.vue添加到src>views>first中,可以时事预览
2. first.vue中：

 <div class="left">
            <left></left>
 </div>
<script type="text/javascript">
import Left from'../components/Left.vue'
export default {
    components:{
        Left
    }
}
</script>

3-4 右侧内容显示+导航实现

1. 组件复用，右边只一个vue，兄弟间传值：创建事件总线msg.vue

   • 事件总线： 公共的，传数据

    import Vue from 'vue'
   
    export default new Vue
   

2. • _this表示this的副本

3. json文件

   • 组件下载及全局

vue补课

1-1

1. 各组件功能

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xJGVRfZT-1619784348213)(C:\Users\Hannah\Videos\Captures\脚手架.png)]

2. vuecli开发方式是在项目中开发一个一个组件对应一个业务功能模块，日后可以将多个组件组合到一起形成一个前端系统；日后在使用vuecli进行开发时不在书写html，编写的是一个组件，日后vuecli会将组间编译成运行的html文件

3. 如何开发vue脚手架

   • 主路口： main.js
   • main.js指向app（含有router.vue），router.vue中有找Index.js中的根

4. export default{ //es6暴露当前组件对象

   }[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8sJIu4cj-1619784348216)(C:\Users\Hannah\Videos\Captures\es6.png)]

1-2 在脚手架中使用axios

1. RAP2： 免费接口