vue3项目初始化及相关配置

1.安装vue

yarn global add @vue/cli

 

2.初始化项目

vue create vue-test

tip:如果报错，则是因为未配置环境变量

windows系统参考https://www.cnblogs.com/LHLVS/p/11328124.html

mac 系统

yarn global dir

(1)找到yarn global安装路径后，比如路径如下

/Users/username/.config/yarn/global/node_modules/.bin

(2)修改~/.bash_profile

终端执行 vim ~/.bash_profile

加一行. export PATH="$PATH:/Users/username/.config/yarn/global/node_modules/.bin"

加完后再执行source ~/.bash_profile 让命令生效

 

3.使用less/sass

(1)yarn add less@2.7.3 less-loader@6.0.0 --save less只能安装3.0以下版本

(2)全局使用定义的less变量文件

yarn add style-resources-loader vue-cli-plugin-style-resources-loader -D
然后在vue.config.js添加以下配置

// vue.config.js

const path = require('path');

module.exports = {
  // ...
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      // 引入需要全局加载的 less 文件
      patterns: [path.resolve(__dirname, './src/styles/var.less')],
    },
  },
};

 

 

4.使用vue-router

yarn add vue-router@4 --save 要指定4版本

在main.js中 添加 import router from './router'

createApp(App).use(router).mount('#app')

 

5.使用animate

npm install animate.css@3.5.1 --save

在main.js中   import animated from 'animate.css'

Vue.use(animated)

在视图中使用

<div class="animated zoomIn">

animate测试

</div>

 

6.使用mock

参考

yarn add mockjs --save-dev

添加mock文件夹 添加index.js util.js

//util.js

const fs = require('fs')                        
const path = require('path')
 
module.exports = {
    // 用于被index.js进行调用
    getJsonFile (filePath) {
        // 读取指定的json文件
        const json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')
        // 解析并返回
        return JSON.parse(json)
    }
}

　　

//index.js

const Mock = require('mockjs')
const util = require('./util')

module.exports = function (app) {

    app.get('/api/articleList', (rep, res) => {
        // 响应时，返回 mock data的json数据
        const articleList = util.getJsonFile('./article-list.json')
        res.json(Mock.mock(json))
    })
    app.get('/api/bannerList', (rep, res) => {
        // 响应时，返回 mock data的json数据
        // const articleList = util.getJsonFile('./article-list.json')
        // 将json传入 Mock.mock 方法中，生成的数据返回给浏览器
        res.json(Mock.mock({
            'list|3': [{
                'url': '@image',
                'id|+1': 1, //属性 id 是一个自增数，起始值为 1，每次增 1
            }]
        }))
    })
}

　　

在配置文件中添加配置 devServer:{

before:require('./src/mock/index')

}

接口请求和index.js里的本地接口路径一致，这样请求的时候就会拦截成mock数据。

 

7.在根目录中创建vue.config.js

module.exports = {
  outputDir: 'dist', // 打包的目录
  lintOnSave: true, // 在保存时校验格式
  productionSourceMap: false, // 生产环境是否生成 SourceMap
  devServer: {
    open: true, // 启动服务后是否打开浏览器
    overlay: { // 错误信息展示到页面
      warnings: true,
      errors: true
    },
    host: '0.0.0.0',
    port: 8066, // 服务端口
    https: false,
    hotOnly: false,
    // proxy: { // 设置代理
    //   '/api': {
    //     target: host,
    //     changeOrigin: true,
    //     pathRewrite: {
    //       '/api': '/',
    //     }
    //   },
    // },
  },
}

8.使用typescript

1.在创建项目的时候。选择Manually select features" 选项，然后选择 "TypeScript"

2.在原有项目上改造为 ts 项目

vue add typescript

或者一步一步引入

（1）yarn add typescript -D
（2）在根目录创建 tsconfig.json 文件：      

{
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    // 与 Vue 的浏览器支持保持一致
    "target": "es5",
    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "es2015",
    // 这可以对 `this` 上的数据 property 进行更严格的推断
    "strict": true,
    "moduleResolution": "node"
  }
}

（3）src 目录下的 main.js 文件名改为 main.ts，以及其他 js 文件改为 ts 后缀

（4）在根目录下添加shims-vue.d.ts 

/* shims-vue.d.ts */
declare module '*.vue' {
  import { defineComponent } from 'vue';

  const component: ReturnType<typeof defineComponent>;
  export default component;
}

 (5)在<script> 标签上声明 lang="ts"，为了让 TypeScript 能够正确推断 Vue 组件中的类型，需使用defineComponent