vue 使用总结

官网文档  vue cli 3 安装

安装vue

1.npm install vue

 

 

2.npm install -g @vue/cli

 检测vue cli安装成功

vue --version

 

D:\vue_tp51\vue>vue --version
3.0.1

 

 

 安装cli-service-global  

为了使用 vue serve  --open

必须安装

npm install -g @vue/cli-service-global

 

 创建新项目

vue create admin_vue

然后选择默认设置

Vue CLI v3.0.1
? Please pick a preset: default (babel, eslint)

Vue CLI v3.0.1
✨ Creating project in D:\vue_tp51\vue\admin_vue.
⚙ Installing CLI plugins. This might take a while...

......

🎉 Successfully created project admin_vue.
👉 Get started with the following commands:

$ cd admin_vue
$ npm run serve

 

 添加路由 vue add router

 

D:\vue_tp51\vue\admin_vue>vue add router
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes

🚀 Invoking generator for core:router...
📦 Installing additional dependencies...

added 1 package in 53.714s
✔ Successfully invoked generator for plugin: core:router
The following files have been updated / added:

.gitignore
README.md
babel.config.js
package-lock.json
package.json
public/favicon.ico
public/index.html
src/App.vue
src/assets/logo.png
src/components/HelloWorld.vue
src/main.js
src/router.js
src/views/About.vue
src/views/Home.vue

You should review these changes with git diff and commit them.

 

 

目录结构变化

Home.vue变成了首页

 

router.js是这样定义的

 

 

 然后在这里添加路由 D:\vue_tp51\vue\admin_vue\src\router.js

 

添加element ui npm i element-ui -S

 

D:\vue_tp51\vue\admin_vue>npm i element-ui -S
npm WARN babel-loader@8.0.0 requires a peer of @babel/core@^7.0.0 but none is installed. You must install p
eer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin
","arch":"any"} (current: {"os":"win32","arch":"x64"})

 

+ element-ui@2.4.6
added 6 packages in 88.54s

文档

快速上手   vue-cli-plugin-element Element plugin for @vue/cli 3.0.

 

引入elementUI

找到admin_vue\src\main.js文件 导入插件element-ui 和css文件

 

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

Vue.use(ElementUI);