创建项目
使用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页面