Полная сборка проекта VUE (1) -- инициализация

Vue.js

Предварительные условия:

  1. Знаком с использованием Javascript + HTML5 + css3.
  2. Понимание модулей модуля ES2015 (экспорт, импорт, экспорт по умолчанию).
  3. Изучите основы nodejs, общие команды npm и использование сценария npm (управление пакетами с использованием npm в проектах vue).
  4. Узнайте о сборщике веб-пакетов (общие параметры конфигурации и концепции загрузчика). (веб-пакетwebpack.github.io/это инструмент для упаковки модулей. Он берет каждый файл в наборе файлов как модуль, определяет их зависимости и упаковывает их как развертываемые статические ресурсы. Использование веб-пакета также требует установки npm).

начать установку:

Создавайте большие одностраничные приложения с помощью vue-cli: инструмента формирования шаблонов для vue.js.

Выполните следующий код, чтобы завершить базовую конструкцию проекта (настройка веб-пакета, установка зависимых пакетов и создание базового каталога).

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

# 安装依赖，走你

$ cd my-project

$ npm install

$ npm run dev

Основной каталог:

    ├── build // webpack的基本配置、开发环境配置、生产环境配置
    ├── config // 路径、端口以及反向代理配置
    ├── dist // webpack打包后的静态资源
    ├── node_modules // npm安装的依赖包
    ├── src // 前端主文件
    │   ├── assets // 静态资源
    │   │   ├── font
    │   │   ├── img
    │   │   └── scss
    │   ├── components // 单个组件
    │   │   ├── xxx.vue // 单文件组件
    │   ├── router // 路由配置
    │   ├── store // 全局变量
    │   ├── App.vue // App组件
    │   ├── main.js 主入口文件
    ├── static // 静态文件
    ├── .babelrc  // babel的配置项
    ├── .editorconfig  // 编辑器的配置项
    ├── .gitignore  // 会忽略语法检查的目录
    ├── index.html // 入口页面
    ├── package.json // 项目的描述和依赖

описание файла package.json: описание и зависимости проекта

1.скрипты: некоторые команды для компиляции проекта

Пример: выполнитьnpm run dev, то есть выполнить соответствующий узел build/dev-server.js в скриптах.

2.зависимости: зависимости при выпуске проекта

Пример: выполнитьnpm install wx --save, то есть установить зависимый модуль wx.

3.devDependencies: зависимости во время разработки проекта

Пример: выполнитьnpm install sass --save-dev, то есть установить зависимый модуль sass.

Приложение: Инструкции, связанные с npm:

npm — это инструмент управления версиями Node.js и управления пакетами зависимостей, который использует среду узла для установки пакетов зависимостей, необходимых для внешних строительных проектов.

Скорость установки и загрузки Npm слишком низкая, используйте зеркало Taobaocnpm installУстановите быстро. Метод настройки:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

Процесс загрузки проекта:

1. страница index.html

Текущий строительный проект — это SPA (одностраничное приложение), а страница index.html — это страница входа, и выполняется настройка связанных страниц, таких как мета.

этой страницы<div id="app"></div>Основная часть смонтирована.

2. main.js: основной файл входа

Примечание:Установить в webpack.base.config-> entry: { app: './src/main.js'}

Этот файл инициализирует экземпляр Vue и вводит соответствующий модуль (вам необходимо подтвердить его перед введением и установкой в ​​package.json), прикрепленный к main.js для:

​	import Vue from 'vue'   // 引入vue
​	
​	import App from './App'   // 引入主组件App.vue
​	
​	import router from './router' // 引入路由配置文件
​	
​	import axios from 'axios' // 引入网络请求工具axios

3. App.vue: основной компонент

Основной компонент монтируется на странице входа index.html, а основной компонент вводится в основной файл входа main.js.

создал другие компоненты (например:/src/components/xxx.vue), его можно отобразить в текущем основном компоненте с помощью конфигурации маршрутизации.

4. Настройка маршрутизации vue-router

Конфигурация маршрута: сопоставьте компоненты с маршрутами, а затем сообщите vue-router, где их отображать.

npm install vue-router

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

// 1.定义（路由）组件：import (当前应用中为单文件组件)。
import Home from '../components/Home.vue'

// 2. 定义路由并创建 router 实例，然后传 `routes` 配置
// 每个路由应该映射一个组件。
var router = {}

export default router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
   ]
})

// 3. 在main.js主入口文件中创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

// 现在，应用已经启动了！

Next

В следующем разделе обсуждается совместное создание сетевых запросов и компонентов.

"Продолжение следует"

coding01 с нетерпением ждет вашего дальнейшего внимания

qrcode

Спасибо, что тоже это увидели

qrcode

Категории