vue3.0+Vue/Cli 4.5.0 项目搭建

npm@6.13.4

1.初见vue3.0项目

node v12.14.1
npm 6.13.4
vue/cli 4.5.0

全局安装 vue/cli
npm安装

npm i -g @vue/cli

yarn安装

yarn global add @vue/cli

创建vue 项目

vue create datav-project

手动配置

vue3.0

进入项目

cd datav-project

!注意:增加typeScript vue-router vue-store 都是ts版本

添加 TypeScript

vue add typescript   // 重新启动 才能看到效果
//cli 添加 typeScript   

Use class-style component syntax? (Y/n),
//？使用类样式的组件语法？(y/n)，
参考.
Use Babel alongside TypeScript (required for modern mode，auto-detected polyfills，transpiling JSx)? (V/n)】
// 在使用Babel的同时使用TypeScript(现代模式需要，自动检测的填充，transpiling JSx)
// Convert all .js files to .ts // 全部js转ts
// Allow .js files to be compiled? // 允许js 完成编译
// Skip type checking of all declaration files (recommended for apps) // 跳过文件检测

增加 router

vue add router   // 重新启动 才能看到效果

增加 vuex

vue add vuex   // 重新启动 才能看到效果

增加 axios

vue add axios  // 重新启动 才能看到效果

axios引入

import axios from 'axios'
 
import VueAxios from 'vue-axios'
 
createApp(App).use(VueAxios, axios)

axios 挂载原理

//   Vue.axios = _axios;
//   window.axios = _axios;
//   Object.defineProperties(Vue.prototype, {
//     axios: {
//       get() {
//         return _axios;
//       },
//     },
//     $axios: {
//       get() {
//         return _axios;
//       },
//     },
//   });

axios 的使用

vue.axios.get(api).then((response) => {
    console.log(response.data)
})
this.axios.get(api).then((response) => { 
    console.log (response.data)
})
this.$http.get(api).then((response) =>{
    console.log( response.data)

下载scss

npm install -D sass-loader node-sass

版本
"sass": "^1.38.0",
 
"node-sass": "^6.0.1",
"sass-loader": "^8.0.2",

引入第三方库

npm install @jiaminghi/data-view

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'

Vue.use(dataV)
// 按需引入
import { borderBox1 } from '@jiaminghi/data-view'

Vue.use(borderBox1)

vue2.0的版本 不兼容

Could not find a declaration file for module '@jiaminghi/data-view'.

方案一

npm i --save-dev @types/jiaminghi__data-view

方案二

在 shims-vue.d.ts中增加

declare module '@jiaminghi/data-view'

  "vue-class-component": "^7.2.3",  // 官方核心库 vue 3.0
  "vue-property-decorator": "^9.1.2",  // 非官方开发核心库

----------------------------------------------------------------

自动配置

router vuex scss