Vue 项目创建

创建项目

使用npm命令或者cnpm命令创建

安装node（步骤省略，一路next即可）

安装成功以后执行命令：node -v

出现如下界面即为安装成功

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue-cli

npm install -g vue-cli            --force强行安装

安装webpack

Npm install -g webpack

npm install -g webpack-cli

创建vue项目

切换到工作目录下面

Cd/d 目录

创建项目

如果使用的是vue3的命令去创建项目  那么就需要把之前的2版本的vue-cli卸载重新安装vue3

 npm uninstall -g vue-cli   (卸载2.9.6 vue-cli)

 npm install -g @vue/cli    

选择下面选项

出现下面内容就算成功

项目已经创建完成  并且 运行成功

启动命令 

Npm run XXX

  xx的 值是由package.json中scripts里面的参数决定的

出现如下错误

Package.Json出错时找文件

路由跳转：

Router-link = a标签 

<router-link to=””>链接跳转

组件显示的时候 App.vue一定不能少的一个标签是:<router-view/>

组件的注意事项:组件中<template></template>里面有且只能有一个跟标签

使用ui

安装

在黑窗口中输入Npm i element-ui -S

使用ui在main.js中写入下面的内容

import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';

import App from './App.vue';

Vue.use(ElementUI);

使用elementui布局

嵌套路由

嵌套路由在index.js下面使用的时候只需要多加一个children属性即可，设置的嵌套路

  {

  path:"*",

  component: () => import(/* webpackChunkName: "about" */ '../views/404.vue')

  }

访问不存在的路由的时候就会跳转到这个404页面

更改代码结构