Vue.js学习笔记走向正式开发篇

最新推荐文章于 2023-02-21 10:49:05 发布

莫莫绵

最新推荐文章于 2023-02-21 10:49:05 发布

阅读量355

点赞数 1

分类专栏：前端技术知识文章标签： vue vue-cli vue-router 工程创建

本文链接：https://blog.csdn.net/qq_36428889/article/details/103123210

版权

前端技术知识专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue.js学习笔记走向正式开发篇

vue-cli 简介

项目骨架，设定一个统一的目录结构.

vue-cli安装

安装node.js – 下载地址 : http://nodejs.cn/download/ 选择 Windows 安装包 (.msi) 64位
直接安装、下一步。检测 cmd中输入：node -v 查看版本号
同时查看 npm 也安装好了：npm -v 【npm是软件包管理工具】
安装Node.js淘宝镜像加速器（修改软件源、加速器）
npm install cnpm -g【-g 是全局安装】
或使用如下语句
npm install --registry=https://registry.npm.taobao.org
安装 vue-cli
cnpm install vue-cli -g
测试是否安装成功：
vue list

创建vue项目

创建一个基于 webpack 模板的vue项目，名叫hello-vue

cmd下切换至想要安装的目录 vue init webpack myvue
安装会出现项目名、描述、作者的确认，直接回车即可。其他的初始安装都选no即可。那些东西我们可以自己手动安装。
下载依赖并运行:
cd hello-vue
npm install
npm run dev
打开http://localhost:8080/即可.Ctrl+C停止。

webpack

它是一个js的静态模块打包器，凡是静态资源，都可以当成模块打包。配置文件：webpack.base.conf.js

安装

安装webpack和webpack-cli：npm install webpack webpack-cli -g
通过检查版本看是否安装成功: webpack -v和webpack-cli

查看项目

整个项目结构如下：
在这里插入图片描述

IDEA配置

首先cmd查看自己安装node.js的目录：where node
然后点击IDEA的运行，编辑配置，将该路径中的node.exe配置在Idea的如图：
在这里插入图片描述这样就可以通过IDEA直接运行了。

vue-router 路由

Vue.js 官方的路由管理器。说明文档戳这里
可以做页面跳转哇。

安装

cmd进入项目目录，使用npm安装 npm install vue-router --save-dev

使用

创建一个views
src/views 目录是专门放页面的。我们可以创建一个页面如：
Login.vue

<template>
  <div>登录</div>
</template>

<script>
  export default {
    name:'Login'
  }
</script>

<style scoped>

</style>

src/router目录是放路由配置的代码，我们可以创建一个路由配置文件：
index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login'

Vue.use(Router);

export default new Router({
  routes: [{
    path: '/login',
    name:'Login',
    components:Login
  }]
});

解析：首先应当引入vue-router包VueRouter将其交给Vue声明使用。引入我们要跳转的页面。然后将路由配置文件暴露export出去，设定路径为/login。

然后在main.js中声明使用路由配置文件的路径

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'

import router from './router'

Vue.config.productionTip = false;
Vue.use(VueRouter);

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

接着在App.vue中加入链接和页面跳转。router-link就相当于是一个a标签，使用to属性指定链接。router-view就是将路由匹配到的东西（组件）渲染到这里。
App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-link to="/" >首页</router-link>
    <router-link to="/login" >登录</router-link>
    <router-view ></router-view>
  </div>
</template>

<script>


export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行测试。发现浏览器报错：
IE浏览器：

[vue-router] Failed to resolve async component render: TypeError: Unable to get property ‘ $c r e a t e E l e m e n t^{'} o f u n d e f i n e d o r n u l l r e f e r e n c e [v u e - r o u t e r] u n c a u g h t e r r o r d u r i n g r o u t e n a v i g a t i o n : T y p e E r r o r : U n a b l e t o g e t p r o p e r t y^{'}$ createElement’ of undefined or null reference

火狐浏览器：

[vue-router] Failed to resolve async component render: TypeError: _vm is undefined vue-router.esm.js:16 [vue-router] uncaught error during route navigation: vue-router.esm.js:16 TypeError: "_vm is undefined" render Login.vue:3... 哪里出了问题呢？哈哈其实在一开始的index.js中有一个小陷阱。因为IDEA不会报这个错，而且自动提示还会直接提示你这样写。

index.js
export default new VueRouter({
routes: [{
path:’/content’,
name:‘Content’,
components:Content
}]
}
);
解决：这里是components应该改为component。这样问题就解决了