【VUE.js】前端框架——未整理

基于脚手架创建前端工程

环境

• 当安装node.js时，它本身就携带有npm命令。（-v 查版本号）
• 安装VUE CLI npm i @vue/cli -g（全局）

创建

1. vue create 【project name】

镜像源解决方案

输入创建命令后，提示检查更新失败了？？？
原因是 淘宝源证书严格检查的 其证书失效了。过期将无法访问就会导致插件更新失败

• 如何解决呢？

将镜像源换成官方源

  #1. 查看当前源
        npm config get registry
  #2. 更换npm源为国内npm官方镜像
      npm config set registry http://registry.npmjs.org/ 

紧接着， 把证书检查关了

# 把证书检查关了
npm cache clean --force
 
npm config set strict-ssl false
 
npm install

方法二：更换为最新的淘宝源
npm config set registry https://registry.npmmirror.com npm config set registry https://registry.npm.taobao.org
注意
你如果还想继续使用淘宝镜像源的话，一定要确保 C:\Users\Administrator目录下的.vuerc文件，其配置为：
“useTaobaoRegistry”: true

> {
  "useTaobaoRegistry": true,  //此处为true,表示继续使用淘宝镜像源
  "packageManager": "yarn"
}

查看当前使用的镜像地址:npm config get registry

# 淘宝镜像源
 https://registry.npmmirror.com
 https://registry.npm.taobao.org

查看当前镜像源

2. vue ui
   

项目结构

思考？前后端端口号冲突

vue

axios

解决跨域问题

脚手架搭建完成后，项目目录中没有 vue.config.js 文件，需要手动创建

router

根据访问路径不同，展示不同的视图组件。

路由配置

• 路由器
• 路由链接组件
• 路由视图组件
  

路由链接：相当于导航栏上的超链接
路由视图：类似点击超链接后跳转的页面
路由器:通过路由器中的那张表去寻找要展示的组件

使用路由？

1. 需要引入vue-router，可用命令进行引入npm install router
2. 需要在main.js中导入import router from './router'
3. 同时，在该文件中创建Vue对象时， new Vue({router}) 将该实例写入参数中
4. 在项目目录中会出现router文件夹，里面有index.js

// 路由表
（）
// “超链接” 视图组件（占位符）

路由跳转

标签式

编程式 （在js文件中）

<script>
  export default {
    methods: {
      jump(){
        // 编程式路由跳转
        this.$router.push("/about")
      }
    },
  }
</script>

嵌套路由/子路由

安装ele

> npm 安装
>推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
>npm i element-ui -S

引入 element.ui

引入 Element
你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

¶完整引入
在 main.js 中写入以下内容：

 import Vue from 'vue';  
 import ElementUI from 'element-ui'; 
 import  'element-ui/lib/theme-chalk/index.css';
  import   App from './App.vue'; 
    Vue.use(ElementUI);  
      new Vue({   el: '#app', 
        render: h => h(App) 
      }); ```
      以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

子路由

在路由表中的组件的组件中用 children 写其子路由表

VUEX

安装

核心概念

mutations

actions