创建Vue项目2

创建Vue项目

Vue.js安装

1、安装Nodejs
2、验证

node -v
v16.13.2

npm -v
8.1.2

3、全局安装vue cli
https://cn.vuejs.org/v2/guide/installation.html
https://cli.vuejs.org/zh/guide/installation.html

npm install -g @vue/cli

4、验证

vue --version

创建vue项目

1、在一个空白文件夹，右键打开“Windows PowerShell”
2、输入 vue init webpack test-platform 创建项目，回车

PS E:\dome> vue create test-platform
Vue CLI v4.5.15
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features



Vue CLI v4.5.15
✨  Creating project in E:\dome\test-platform.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 1277 packages in 2m

10 packages are looking for funding
  run `npm fund` for details
🚀  Invoking generators...
📦  Installing additional dependencies...


added 55 packages in 7s

10 packages are looking for funding
  run `npm fund` for details
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project test-platform.
👉  Get started with the following commands:

 $ cd test-platform
 $ npm run serve

启动项目

PS E:\dome> cd test-platform                                                                                                                                            PS E:\dome\test-platform> npm run serve                                                                                                                                 
> test-platform@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 5158ms                                                                                                                       下午4:29:47


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.10.149:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

 

浏览器打开 http://localhost:8080/

安装eslint插件

#安装插件
vue add eslint

PS E:\dome\test-platform> vue add eslint

�📦  Installing @vue/cli-plugin-eslint...


up to date in 9s

10 packages are looking for funding
  run `npm fund` for details
✔  Successfully installed plugin: @vue/cli-plugin-eslint

? Pick an ESLint config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit

�🚀  Invoking generator for @vue/cli-plugin-eslint...
�📦  Installing additional dependencies...


added 134 packages in 15s

12 packages are looking for funding
  run `npm fund` for details       
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: @vue/cli-plugin-eslint
PS E:\dome\test-platform> 

安装vuetify组件

#添加vuetify ui组件
vue add vuetify

PS E:\dome\test-platform> vue add vuetify
 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes

�📦  Installing vue-cli-plugin-vuetify...


added 9 packages in 6s

12 packages are looking for funding
  run `npm fund` for details
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Default (recommended)

�🚀  Invoking generator for vue-cli-plugin-vuetify...
�📦  Installing additional dependencies...


added 15 packages in 21s

12 packages are looking for funding
  run `npm fund` for details
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
 vuetify  Discord community: https://community.vuetifyjs.com
 vuetify  Github: https://github.com/vuetifyjs/vuetify
 vuetify  Support Vuetify: https://github.com/sponsors/johnleider

PS E:\dome\test-platform> 

再次启动项目

预设布局

https://vuetifyjs.com/zh-Hans/getting-started/wireframes/

添加vue-router

vue add router

安装axios组件

npm install axios

elementUI安装

https://element.eleme.cn/#/zh-CN/component/installation

npm i element-ui -S

只引入elementUI的Notification通知组件，在main.js
https://element.eleme.cn/#/zh-CN/component/quickstart

import { Notification } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.prototype.$notify = Notification

https://element.eleme.cn/#/zh-CN/component/notification

遇到问题1

解决办法：
https://vuejs.github.io/vetur/guide/FAQ.html#vetur-can-t-find-tsconfig-json-jsconfig-json-in-xxxx-xxxxxx