Имитация понравившегося вам фона +vue+ts+vuecli3.0+elementUi

внешний интерфейс Командная строка JavaScript Vue.js
Имитация понравившегося вам фона +vue+ts+vuecli3.0+elementUi

предисловие

Недавно я попробовал комбинацию vue + ts. Лично мне кажется, что vue не так дружелюбен к ts, как angular2, но я все же выбираю ts между ts и js. С точки зрения синтаксического сахара es6 очень удобен Теперь я подробно расскажу, как использовать ts+vue. Плагинов для ts+vue будет намного меньше, но определенно будет все больше и больше плагинов, так как vue поддерживает tsПревью демо-версии текущего проекта(Как новичок, в конце концов, опыт многих проектов может дать некоторым новичкам подсказкуЭпизод 2

Узнайте о плавании фитнес:github Плагин JQ

Краткое содержание

  1. Установка vuecli3.
  2. конфигурация конфигурационного файла vue
  3. Создание файла структуры проекта
  4. Маршрутизация использования
  5. vue cli запускает и позволяет загружать плагины ts, которые поддерживают vue
  6. Использование ц aixo
  7. Использование vue X
  8. Загрузка изображения (пакетная загрузка) // использование элемента ts
  9. Использование пагинации
  10. Подпакет кнопок переделки
  11. компилятор форматированного текста

1.VueCLI 3.0

VueCLI 3.0Сначала установите node.jsУстановка Baidu самостоятельно

Установить:

# 然后我们安装vuecli3.0 npm 或者 yarn都是可以的网上慢的小伙子可以用yarn
npm install -g @vue/cli
# OR
yarn global add @vue/cli

Создайте проект:

vue create my-project
# OR
vue ui

  1. Первый — это шаблон, который я создал сам.
  2. Второй — системный по умолчанию.
  3. Третья самостоятельная конфигурация

Я создал один здесь, мы выбираем тот, который выделен красным

Мы так выбираем.Если выбран пробел, выберите вверх и вниз

Введите напрямую (по умолчанию согласен)

Введите полностью и выберите package.json, чтобы увидеть, какой ts мы выбрали, а затем проверьте синтаксис sass esl

Затем нажмите Enter, чтобы загрузить окончательный проект cli. Терпеливо ждать

мы скачали

# 输入
vue ui

Добро пожаловать в графический интерфейс vuecli3.0, не волнуйтесь и посмотрите на файловую структуру нашего проекта.

2. Конфигурация файла конфигурации vue

Ниже представлена ​​структура нашего файла

  ##  文件介绍
 
 1.   node_modules //当前node模块存放处
 2.   public //index页面所在镜头文件也可以放这个里面
 3.   src //当前项目存放
        assets //静态文件存放
        components //组件存放
        views //项目存放
        app.vue //这个我们文件的主要路由输入地方
        main //总的js文件
        router //路由文件
        shims-tsx.d //兼容jsx
        shims-vue.d //兼容vue
        store //vuex总文件
 4.   pakeage.js //文件（我们安装的依赖都再里面可以看到，也可以根据这个去下载node_modules）
 5.   我们还少一个vue.config.js 和 pakeage.js 同级
Отправить пользу на нашу вечеринку
// vue.config.js
module.exports = {
    // 选项...
    // 当使用基于 HTML5 history.pushState 的路由时；
    // 当使用 pages 选项构建多页面应用时。
    baseUrl:"",
    // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
    outputDir:"webApp",
    // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
    assetsDir:"assets",
    // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
    indexPath:"index.html",
    // 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而，这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希。
    filenameHashing:true,
    // 多页面
    pages:undefined,
    // 编译警告
    lintOnSave:false,
    // 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。
    runtimeCompiler:false,
    // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。
    transpileDependencies:[],
    // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
    productionSourceMap:false,
    // 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
    crossorigin:undefined,
    // 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性。需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。另外，当启用 SRI 时，preload resource hints 会被禁用，因为 Chrome 的一个 bug 会导致文件被下载两次。
    integrity:false,
    // 反向代理
    devServer:{
        // devServer: {
        //     proxy: {
        //       '/api': {
        //         target: '1',
        //         ws: true,
        //         changeOrigin: true
        //       }
        //     }
        // }
    }
}

Базовая конструкция проекта vue+ts завершена

Категории